I have a parent component and that needs to be loaded multiple child components. The child components are to be loaded by taking the object from parent, so far its working as expected. But the problem here is, I have a button to be rendered in the child component and the text of the button comes from parent component. If I click on that button the respective child component should open and the data which came from parent component should be shown in the child component, here whenever I click on child component button, the child component is getting opened but the input() data is getting undefined. Because of this the data from the parent component is not displaying in the child component when it is expanded. Here is the sample code :

parentcompoent.html :

<div *ngFor="let tile of tiles$ | async;">
<ng-container [ngTemplateOutlet]="$any(getSelectedComponentTemplete(tile.tileUrl))"
                    [ngTemplateOutletContext]="{ $implicit: {data:tile} }">
</ng-container>
</div>

<ng-template #card let-obj>
<app-child [data]="obj.data"></app-child>
</ng-template>`

parentcomponent.component.ts :

@ViewChild('card', { static: true }) card!: TemplateRef<any>;

getSelectedComponentTemplete(type: string) {
switch (type) {
case "card":
return this.card;
default:
return;
}

childcomponent.html :

<mat-card>
<mat-card-title>
<button [routerLink]="data?.cardUrl" [disableRipple]="true" mat-flat-button>{{data?.tileName}}</button>
</mat-card-title>
</mat-card>`

childcomponent.component.ts :

@Input()
data!: any;

ngOnInit(): void {
console.log(this.data);
}

I don't know why its loading perfectly when the child component is part of parent component and its not loading data when I click on the button in child component.

Can someone help me on this ?