If you have more than one column using ngTemplateRef, all columns will be overwritten with the latest one.

@ViewChild('tplIconColumn') public tplIconColumn?: TemplateRef<any>; @ViewChild('tplActionColumn') public tplActionColumn?: TemplateRef<any>;

I am assigning columns like:

ngAfterViewInit(): void { this.dtOptions.columns = [ { title: '', data: null, defaultContent: '', ngTemplateRef: { ref: this.tplIconColumn } }, { title: 'Title', data: 'title', name: 'title' }, { title: 'Description', data: 'description', name: 'description' }, { title: '', data: null, defaultContent: '', ngTemplateRef: { ref: this.tplActionColumn } }, ]; }

The final result overwrite the content of "tplIconColumn" with content from "tplActionColumn", and the column that should display the content of "tplActionColumn" is displaying empty content.

It must display the content like: