question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Quassocommented, May 23, 2019

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 😃

0reactions
zvonimirfrascommented, Jun 10, 2019

@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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using a custom template with a TableItem in Carbon Design ...
Documentation : Using a custom template with a TableItem in Carbon Design (Angular) not yielding expected functionality #455.
Read more >
Using a custom template with a TableItem in ... - Stack Overflow
The code in question which is causing issues by default with custom templates is this, used for the pagination functionality in the demo:...
Read more >
TableItem | carbon-components-angular
Constructors. constructor. new TableItem(rawData: any): TableItem. Defined in src/table/table-item.class.ts:137 ... expandedTemplate: TemplateRef<any>.
Read more >
Commissioner Joseph Ponte - City Record
not limited to, proposer's intention to use its own forces to perform any or all of the ... required in the Design Documents...
Read more >
Bug List
580124, Web Tool, document, webtools.documentation-inbox ... NEW, ---, [c++17] template argument deduction from method parameter not working, 2022-05-20.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found