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.

Md-list breaks when using with ng-container or ng-template

See original GitHub issue

Bug, 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:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
azaruscommented, Jul 8, 2017

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

2reactions
jelbourncommented, Jul 7, 2017

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.

Read more comments on GitHub >

github_iconTop 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 >

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