Pass ng-template into component

Question

I am facing the problem, that I need to pass multiple ng-template into another component as a template, example:

<app-datatable>
   <ng-template tdDataTableTemplate="description" let-value="value" let-row="row" let-column="column">
    <p matTooltip="{{ row[column ]}}">{{ row[column] }}</p>
  </ng-template>
  <ng-template tdDataTableTemplate="vendorName" let-value="value">
    <p matTooltip="{{ value }}">{{ value }}</p>
  </ng-template>
</app-datatable>

app-datatable is my component and I need to pass these templates to it as a template.

td-data-table is Teradata covalent DataTable component. It has functionality, that I can template each column with ng-template. But I want to pass ng-template through my component into td-data-table - hope it makes sence

Solution:

I didn't manage to find Covalent way solution. But I've managed to rewrite Teradata grid to custom grid, which allows me more control over it. Here is Stackblitz: Demo

score 0 · Answer 1 · answered Apr 13 '18 at 10:57

I encountered the same problem and managed to fix it with the following:

In datatable.component.ts:

@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnChanges, AfterContentInit {
    ngAfterContentInit(): void {
        for (let template of this.templates.toArray()) {
            if (!template.tdDataTableTemplate) {
                continue
            }
            this.tdDataTable._templateMap.set(template.tdDataTableTemplate, template.templateRef)
        }
    }

    @ViewChild(TdDataTableComponent) tdDataTable;
    @ContentChildren(TdDataTableTemplateDirective) templates;
}

This mimics how TdDataTableCompponent handles the templates under the hood.

Also, for completeness, I spoke to the OP on the covalent gitter and they said that they solved it by rewriting the data table from the individual covalent components. They shared a stackblitz here.

Pass ng-template into component

1 Answers1