I have 3 components, 1 parent and 2 children.
Parent component:
<p-tabView [(activeIndex)]="index">
<p-tabPanel header="Child1">
<app-child1 [person]="person.data1"></app-child1>
</p-tabPanel>
<p-tabPanel header="Child2">
<app-child2 [person]="person.data2"></app-child2>
</p-tabPanel>
person: any = {};
ngOnInit(): void {
this.personService.getPerson(this.id).then(obj => this.person= obj);
}
Child1 component:
@Input()
person: any;
ngOnInit(): void {
this.person= {age: 0};
}
<p-inputNumber [(ngModel)]="person.age" ></p-inputNumber>
Child2 component:
@Input()
person: any;
ngOnInit(): void {
this.person= {adress: [{number:0}, {number:0}]};
}
<p-inputNumber disabled [(ngModel)]="person.age" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.adress[0].number" ></p-inputNumber>
<p-inputNumber (ngModel)]="person.adress[1].number" ></p-inputNumber>
I would like that if the value of age
in Child1 changes, it will automatically reflect the change in Child2.