Documentation: Using a custom template with a TableItem in Carbon Design (Angular) not yielding expected functionality

Detailed description

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].

Additional information

Related StackOverflow question

[Quasso]

Hey @cal-smith sorry had a really busy period lately as been closing off a funding round. I’ll get this done soon if it still needs doing?! Thanks 😃

[zvonimirfras]

@Quasso Hi Alex, based on what I’ve seen, documentation is accurate and snippet is from a working demo. It did not work for you by simply copy pasting because you’re organizing your code and data differently than the sample.

That’s fine and it’s ok to organize your code and data how you see fit, that’s why we provide a way to customize table and loading.

Providing that I’m not missing something, I’m not sure where you got lost while reading the docs and how can we prevent that from happening in future to someone else.

Feel free to open a PR with that and let’s make our docs better 😃