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

[azarus]

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.

[julianobrasil]

Isn't this an Angular issue?

[azarus]

How would it be an angular issue? Thought md-list & md-nav-list isn't part of angular.
The display breaks because the md-list adds some custom dom & css classes when compiling. And so when using ng-template or other directives to load components or dom into the lists the change is not detected.

[julianobrasil]

@azarus, I went for an Angular issue, because, by design, ng-container was suposed to work without interfere in the layout (and in Angular docs there are no specific conditions for it to work nor exceptions that would make it brake). Anyway, it's a very superfitial gess of mine as Angular docs are still being improved.

[willshowell]

Looks like a side-effect of content project only working at the top-level.

list-item content projection

Related discussions:

• https://github.com/angular/material2/issues/5263#issuecomment-309916427
• https://github.com/angular/material2/issues/5292

It seems like this open issue in angular core (https://github.com/angular/angular/issues/8563) would help in this case, but I'm not certain.

[azarus]

I guess it breaks since the viewchild is not there when the component is being initialized and the dynamic component is not initialized just yet. So the actual content the list is inteded to work with doesn't exists. And there fore it does not sets up the required classes and divs. Probably the best fix would be to make the child elements send a norification to the parent components and request an update on the view.

[jelbourn]

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.

[azarus]

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

[willshowell]

@azarus, as @julianobrasil points out here, you can use ngProjectAs to project whatever you want.

Annoyingly, there doesn't seem to be any official documentation on the subject, but there is a pretty good Medium post on it: https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b

[azarus]

Thanks, we hired a second developer to speed up the development of our new frontend since these small issues we found during porting our old code to angular2 just cause huge delays and consume our resources to sort out. We'll check on it.

[nickwinger]

Problem is still here.
It is not possible to use ng-template inside mat-list-item...
I think this should be adressed...

<mat-list-item>
   <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
</mat-list-item>

The template is rendered outside of mat-list-text therefore the layout breaks

[nickwinger]

ok, i just found a workaround:

<mat-list-item>
  <div matLine>
    <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
  </div>
</mat-list-item>

[nickwinger]

to enable mat-multi-line styling (so the item gets css auto height) you have to put 3 dummy matLines:

<mat-list dense>
  <ng-container *ngFor="let row of (dataSource$ | async).data | async">
    <mat-list-item (click)="selectRow(row)" [ngClass]="{'selected': isSelected(row)}">
     <!-- 3 dummy matLines to enable mat-multi-line styling -->
     <div matLine></div>
     <div matLine></div>
     <div matLine></div>
     <div matLine>
       <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
     </div>
    </mat-list-item>
    <mat-divider></mat-divider>
  </ng-container>
</mat-list>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}