How can we push each changes in input model class to parent component from child in Angular 13

Question

How can we push each changes in input model class to parent component from child in Angular 13

Child Component

export class ChildComponent implements OnInit {
  @Input() mdlInData: any;
  @Output() mdlOutData = new EventEmitter<any>();

  ngOnInit(): void {
    this.mdlInData.subscribe((data) => {
      this.mdlOutData.emit(this.mdlInData);
    });

// This values Changes in HTML also -> TWO-WAY binding 

  this.mdlInData.id = 1;
    this.mdlInData.Name = "Test";
   this.mdlInData.phone = ['7867878', '768689678']; 

 //... More Properties
 }

Answer 1

You need to implement the OnChanges lifecycle hook:

export class ChildComponent implements OnChanges {
   @Input() input: any;
   @Output() output = new EventEmitter<any>();

   ngOnChanges(changes: SimpleChanges): void {
      // if input property received new value from parent, emit back its value
      if (changes?.input?.currentValue) {
         this.output.emit(changes.input.currentValue);
      }
   }
}