Change ngModel connection

Question

I have a code and I wanted to know how to change the ngModel button-bound.

Ex:

<input [(ngModel)]="Pessoa1.nome">
<input [(ngModel)]="Pessoa1.idade">

<button (click)="onChange1()">Pessoa1</button>
<button (click)="onChange2()">Pessoa2</button>

Ts:

 Pessoa1 = {
 nome:'Guilherme',
 idade:'11'}
 Pessoa2 = {
 nome: 'Gabriel',
 idade: '25'}

I tried this way but I can’t switch between those 2:

 onChange1(){
 this.Pessoa2.nome = this.Pessoa1.nome
 this.Pessoa2.idade = this.Pessoa1.idade
 }

onChange2(){
this.Pessoa1.nome = this.Pessoa2.nome
this.Pessoa1.idade = this.Pessoa2.idade
}

Answer 1

I would use an array and access the attributes in the inputs by the index, to change just change the index

<input [(ngModel)]="pessoa[index].nome">
<input [(ngModel)]="pessoa[index].idade">

<button (click)="change(0)">Pessoa1</button>
<button (click)="change(1)">Pessoa2</button>

index = 0;

pessoas = [{
    nome:'Guilherme',
    idade:'11
}, {
    nome: 'Gabriel',
    idade: '25'
}];

change(index) {
    this.index = index;
}

You can loop and put buttons on the same amount of items in the array, or use a third field to change the index

Answer 2

Costamilam’s response is excellent, but it changes the type of data object for object array, if you want to keep the original data type, I leave another example (that can be seen here) how it can be done using an object like model and at the clicks of the button this model is filled with the values of the corresponding objects:

TS:

count: number = 1;

Pessoa1 = {
  nome:'Guilherme',
  idade:'11'
}
Pessoa2 = {
  nome: 'Gabriel',
  idade: '25'
} 

Pessoa = { 
  nome: this.Pessoa1.nome,
  idade: this.Pessoa1.idade
}

onChange(){
  this.count++;  // A cada clique no botão incrementa 1 em count

  if(this.count %2 == 0) {   // Se count for par preenche o model com o objeto 2
    this.Pessoa.nome = this.Pessoa2.nome;
    this.Pessoa.idade = this.Pessoa2.idade;
  }
  else {  // Senão preenche o model com o objeto 1
    this.Pessoa.nome = this.Pessoa1.nome;
    this.Pessoa.idade = this.Pessoa1.idade;
  }
}

HTML:

<input [(ngModel)]="Pessoa.nome">
<input [(ngModel)]="Pessoa.idade">

<button (click)="onChange()">Pessoa</button>