Question 264227 in Html Question posted in
Some basic documentation can be found here.

Html – How to pass template from parent to child using *ngFor

I have create a simple table wrapper component in Angular. In wrapper component in 1st column I wanted to show custom template.

My main challange is here to write all the template of that column in parent component only.

Means Whatever template I am giving in parent, at that particular row that template should be shown.

I tried something like this

Stackblit Link

Tags:

2

Answers


  1. 0

    You can use Angular’s ngTemplateOutlet.

    Here’s an example of how you can modify your code:

    • Parent Component (app.component.ts)
    import { Component, ViewChild, TemplateRef } from '@angular/core';
import { TableWrapperComponent } from './table-wrapper/table-wrapper.component';

@Component({
  selector: 'app-root',
  template: `
    <app-table-wrapper [data]="tableData">
      <ng-template let-rowData #customColumnTemplate>
        <div>
          Custom Column: {{ rowData.name }}
        </div>
      </ng-template>
    </app-table-wrapper>
  `
})
export class AppComponent {
  tableData = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];
}
    • Table Wrapper Component (table-wrapper.component.ts):
    import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-table-wrapper',
  template: `
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of data">
          <td>{{ row.id }}</td>
          <td *ngIf="customColumnTemplate; else defaultTemplate">
            <ng-container
              [ngTemplateOutlet]="customColumnTemplate"
              [ngTemplateOutletContext]="{ $implicit: row }"
            ></ng-container>
          </td>
          <ng-template #defaultTemplate>
            {{ row.name }}
          </ng-template>
        </tr>
      </tbody>
    </table>
  `
})
export class TableWrapperComponent {
  @Input() data: any[] = [];
  @ContentChild('customColumnTemplate') customColumnTemplate: TemplateRef<any>;
}
    Login or Signup to reply.
  2. 0

    You did everything correctly in your code sample, all you need is to add a ng-template to your html file and it will work fine.

    With your row code:

    <tr *ngFor="let item of options">
      <td>
        <ng-container
          *ngTemplateOutlet="columnTemplate; context: { $implicit: item }"
        ></ng-container>
      </td>
      <td>{{ item.address }}</td>
    </tr>

    Adding this will display the item name:

    <ng-template #columnTemplate let-item>
  {{ item.name }}
</ng-template>

    Working example

    If you need anything more complex, I would advise you build a service to share data between this and the parent component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search