Documentation: Using a custom template with a TableItem in Carbon Design (Angular) not yielding expected functionality
See original GitHub issueDetailed 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
Issue Analytics
- State:
- Created 4 years ago
- Comments:10 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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 😃
@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 😃