Tengo un componente principal y es necesario cargar varios componentes secundarios. Los componentes secundarios deben cargarse tomando el objeto del elemento principal, hasta ahora funciona como se esperaba. Pero el problema aquí es que tengo un botón para representar en el componente secundario y el texto del botón proviene del componente principal. Si hago clic en ese botón, el componente secundario respectivo debería abrirse y los datos que provienen del componente principal deberían mostrarse en el componente secundario, aquí cada vez que hago clic en el botón del componente secundario, el componente secundario se abre pero los datos de input() son poniéndose indefinido. Debido a esto, los datos del componente principal no se muestran en el componente secundario cuando se expande. Aquí está el código de muestra :

componente principal.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); }

No sé por qué se carga perfectamente cuando el componente secundario es parte del componente principal y no carga datos cuando hago clic en el botón del componente secundario.

Alguien me puede ayudar en esto ?