Styjun

According to the IBM Carbon Design System docs, one can define an ng-template and reference it using @ViewChild and a protected variable.

Then, when defining a new TableItem, one should reference this variable and attach data associated with the template via the attribute let-data, in summary:

import 
 TableItem,
 TableHeaderItem
 from 'carbon-components-angular';

/* ... */

export class HomeComponent implements OnInit {

 @ViewChild('customItemTemplate')
 protected customItemTemplate: TemplateRef<any>;

 /* ... */

initialiseTable(records: any) 
 this.model = new TableModel();
 this.model.header = [
 new TableHeaderItem( data: 'Column name' ),
 /* ... */
 ];


 tableRow = [
 new TableItem( data: name: 'Full details', link: '/record/' , template: this.customItemTemplate ),
 /* ... */
 ];

 this.model.data = [tableRow];

And in my component's HTML I have the following ng-template:

<ng-template #customItemTemplate let-data="data">
 <a [routerLink]="data.link">data.name</a>
</ng-template>

I've tried switching between different versions: 9.0.0 and 10.0.0.rc.0.

When I looked at the view, where the custom template ought to be, I see [object Object].

Can anyone help me fix this so that my template inserts properly and I can provide a link to another view?

Update: I have filed this as an issue on GitHub and had a really fast response. I was asked to offer a reduced demo which you can find via Codesandbox here. Related GitHub issue here

I found the issue!

Believe it or not, it has to do with the code provided by IBM's documentation on Pagination.

The code in question which is causing issues by default with custom templates is this, used for the pagination functionality in the demo:

 protected prepareData(data: Array<Array<any>>) 
 // create new data from the service data
 let newData = [];
 data.forEach(dataRow => 
 let row = [];
 dataRow.forEach(dataElement => 
 row.push(new TableItem(
 data: dataElement,
 template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate
 // your template can handle all the data types so you don't have to conditionally set it
 // you can also set different templates for different columns based on index
 ));
 );
 newData.push(row);
 );
 return newData;
 

For reference, here is the relevant documentation. If you scroll down to the header "Use pagination as table footer" you'll see the code I'm talking about :)

Solution

The function needs to check for the type coming through when prepareData is called during pagination:

protected prepareData(data: Array<Array<any>>) 
 // create new data from the service data
 const newData: Array<Array<TableItem>> = [];
 data.forEach(dataRow => 
 const row: Array<TableItem> = [];
 dataRow.forEach(dataElement => 
 let template;
 if (dataElement.template) 
 template = dataElement.template;
 else if (typeof dataElement === 'string') 
 template = undefined;
 else 
 template = this.paginationTableItemTemplate;
 

 row.push(
 new TableItem(
 data: dataElement.data,
 template: template
 )
 );
 );
 newData.push(row);
 );
 return newData;
 

And now it works like a charm.

I have updated the team via GH and will see about a PR for the docs on this--it will not be uncommon that people copy the code and forget about it, like I did. It was only when I stripped back all functionality the custom templates started working, then I worked up from base principles.