Angular fire OnChanges to dynamic child by typescript (NO HTML)

Issue

I'm creating my component by Typescript and passing from there my inputs to my child.

parent TS

this.childComponent = this.viewContainerRef.createComponent(this.data.body).instance;
this.childComponent['childInput'] = 5;

child TS

@Input() childInput!: number;
ngOnChanges(changes: SimpleChanges): void {
    if(changes['childInput'].previousValue !== changes['childInput'].currentValue)
    console.log('change fired')
}

how can I fire from parent the OnChanges?

I tryed this.childComponent.onChanges(); but it was not working because I didn't past any params

thanks

Solution

If you are using Angular v14.1.0

You can use setInput method on componentRef to set Input dynamically. It will automatically trigger ngOnChanges whenever value changes

this.childComponent = this.viewContainerRef.createComponent(this.data.body);
this.childComponent.setInput('childInput',5);

Sample Working Example

Answered By - Chellappan வ