Angular Observable Get updated changed object from a parent to child component

Question

I got an Angular parent component that use to pass a object to the child like the following

export class ParentComponent implements OnInit {

  viewModel = {} as MyViewModel;
 
  constructor(private service: MyService) {} 

  ngOnInit() {
    this.service.subscribe((data) => {
        this.viewModel = data.fdForms.viewModel;
    });  
  
  }

I pass the populated viewModel object to the component thru the html

<app-table [viewModel]="viewModel"></app-table>

In my child component, it is passed with @Input()

export class TableComponent implements OnInit {

  @Input() viewModel = {} as any;
 
  constructor() { }
 

  ngOnInit(): void {
 
    console.log(this.viewModel); // this stays null even when parent is updated

  }
}

After testing, the parent component get the updated data when it changes but the child component is not passed the updated object.

After googling, I think I need to change the code to make the child component subscribe to the parent viewModel object property.

UPDATE: trying OnChanges but getting error

export class TableComponent implements OnChanges {
    
      @Input() viewModel = {} as any;
     
      constructor() { }
     
    
      ngOnChanges(changes: SimpleChange) : void {
     
        console.log(this.viewModel); // this stays null even when parent is updated
    
      }
    }

But I am getting this error. I check other post on OnChanges, can't tell what is the error

Error TS2416: Property 'ngOnChanges' in type 'TableComponent' is not assignable to the same property in base type 'OnChanges'.
  Type '(changes: SimpleChange) => void' is not assignable to type '(changes: SimpleChanges) => void'.
    Types of parameters 'changes' and 'changes' are incompatible.
      Type 'SimpleChanges' is missing the following properties from type 'SimpleChange': previousValue, currentValue, firstChange, isFirstChange

28   ngOnChanges(changes: SimpleChange) {

Thanks for any help from a newbie.

Picci Picci · Accepted Answer · 2021-07-08T15:06:36

ngOnInit gets executed when a Component is created. So, in this case, it may well be that when the Child component is created the service of the Parent has not yet notified any value and therefore nothing is printed on the console.

So you have some different strategies to overcome this problem.

One is to pass service via dependency injection to the Child and then subscribe to it in the ngOnInit of the Child component.

But probably you should look at the way you use viewModel in Child. If you reference it in the template you should be able to see changes when they happen.

Another trick to check if the new value is actually passed, you can use getter/setter for the viewModel property like this.

_viewModel: any;
get viewModel() {
    return this._viewModel;
}
@Input() set viewModel(value: any) {
    this._viewModel = value;
    console.log(this._viewModel);  // this should print something when new data is received
}

Angular Observable Get updated changed object from a parent to child component

2 Answers