angular 父组件属性更新不运行子组件中的方法

Question

I have the following code in a parent component

ngOnInit(): void {
    this.service.method().subscribe(r => {
        this.data = r;
    });
}

This component is using a child component in the following manner

        <childComponent [data]="data">
        </childComponent>

Now the child component has the following method

ngOnInit(): void {
     if (!this.childProperty) return;

    // do some processing here
}

The problem I'm having is that initially when ngOnInit is run on the child component there is no data since the service.method() has not run on the parent component. Once the data is back, the child component should run ngOnInit again, but how do I do this?

Answer 1

You can add a condition in template like

<childComponent [data]="data" *ngIf="data && data.length > 0">
</childComponent>

So, that once the data is available, than only it render the component.

OR

Another way is to do, you can implement ngOnChanges() instead of ngOnInit() , so whenever input property get changes (after the API call) it call that hook and you can do your processing in that hook.