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.
[Table] Error when using ng-content
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
md-table should wait until the ng-content replaced.
What is the current behavior?
md-table throws Cannot read property 'getColumnsDiff' of undefined.
What are the steps to reproduce?
Put ng-content inside md-table.
https://plnkr.co/edit/RpOncq9lbwPcjAGjXSyR?p=preview
What is the use-case or motivation for changing an existing behavior?
Anyone that want to create a component with configurable md-table inside cannot do it.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 4.4.0-RC.0 in the plunker, but this is not working with any version.
Material: 2.0.0-beta.10
Issue Analytics
- State:
- Created 6 years ago
- Reactions:13
- Comments:13 (3 by maintainers)
Top Results From Across the Web
Angular `ng-content` is not working as expected with primeNg ...
To do that, i am writing th and tbody implementation as a content of table and trying to render it in table.component.html using...
Read more >Angular ng-content and Content Projection: A Complete Guide ...
We are going to see how content projection works, when to use it and why, and how it can improve a lot the...
Read more >Difference between ng-template, ng-container and ng-content
ng -content is used to project content into Angular components. You use the <ng-content></ng-content> tag as a placeholder for that dynamic ...
Read more >Structural directives - Angular
Testing the directivelink · Add a condition set to false in the AppComponent . src/app/app. · Update the template to use the directive....
Read more >Angulars NgIf, Else, Then - Explained - Ultimate Courses
Table of contents. What is NgIf? Using Angular's NgIf; Standard *ngIf in Angular; *ngIf and Else; ngIf and ng-template; *ngIf, Then and Else ......
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 Free
Top 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
Updated link to the table-wrapped example: here
Any update on this. The link cited above is now a 404. It would be great to be able to project column and row defs via a template.
Update
I found the table-wrapped example and you are able to produce a basic wrapped component following these steps. As in one level away with the mat-table being the direct child of the wrapper and the content being projected directly through ng-content as indicated.
However
It is still not possible to pass the content into the mat-table from a TemplateRef. This results in the same undefined columns error. Doing some more digging, this appears to be related to how angular/core handles the DOM with ContentChildren not getting children from ngTemplateOutlet; #14842
Is there a work around here? Without being able to piece together more complex behaviors we are left out in the cold trying to use Atomic design principles and there is a lot of code duplication.