javascript - Pasar ng-template a través de un componente
La tabla PrimeNG utiliza plantillas de cuerpo y encabezado para renderizar la tabla. He creado el componente que envuelve la tabla PrimeNG. ¿Cómo puedo pasar ng-template a través de mi componente a p-table?
Respuesta #1
La documentación de PrimeNG muestra esto muy bien. Por ejemplo.
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td *ngFor="let col of cols">
{{car[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Aquí puedes ver que las plantillas body y header están marcadas usando la Directiva pTemplate.
La p-table podrá capturarlas y usarlas a través de ng-container y la Directiva estructural ngTemplateOutlet.
Puedes encontrar el código fuente aquí.
@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
Respuesta #2
puedes usar ng-content para pasar código HTML a tu componente
considera este código como un componente personalizado
<div>
<ng-content> </ng-content>
</div>
y ahora lo usamos
<custom-component>
whatever is written here will be placed where ng content is
</custom-component>
