Md-list breaks when using with ng-container or ng-template
See original GitHub issueBug, feature request, or proposal:
Bug, mdlist & md-nav-list breaks when used with ng-container or ng-template.
What is the expected behavior?
https://i.imgur.com/Iv6pc7q.png
What is the current behavior?
https://i.imgur.com/ca4MC8K.png
What are the steps to reproduce?
<md-nav-list>
<h3 md-subheader>Tests</h3>
<a md-list-item *ngFor="let test of tests">
<ng-container [SubComponent]="test">
</ng-container>
</a>
</md-nav-list>
Dynamic component or template:
<md-icon md-list-avatar fontIcon="fa-clock-o"></md-icon>
<p md-line>Time Period</p>
<p md-line>Queries data from cool</p>
Where right now subcomponent is a custom directive that is just a component factory dynamically loading components into the list based on the data repeated # in *ngFor
What is the use-case or motivation for changing an existing behavior?
It doesn’t work like most of the things in material2.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Probably all of them.
Is there anything else we should know?
No.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:13 (5 by maintainers)
Top Results From Across the Web
Angular ng-template, ng-container and ngTemplateOutlet
This is a Complete Guide To Angular Templates: it covers ng-template, ng-container, the ngTemplateOutlet structural directive, and more.
Read more >How to use ng-container and ng-template - Stack Overflow
I just found out that I can not nest an ng-container inside an ng-template. I solved it this way: <ng-container *ngIf="customLogo"> ...
Read more >Everything you need to know about ng-template, ng-content ...
We should use <ng-container> when we just want to apply multiple structural directives without introducing any extra element in our DOM. For ...
Read more >angular widgets
How can I upload files in the Kendo UI for Angular Upload by using an external button? Solution. The ng new command creates...
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 >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
@jelbourn my personal user experience is horrible with material2 man, i wonder how is it possible that the broken behavior is the expected one. Why isn’t it possible to dynamically add child elements to the list?
This is the expected behavior based on how content projection works in Angular; the API for the list calls for the
md-line
to be a direct child of the item.