mat-list-item does not count “mat-line” classes in a child component

Question

An Angular Material list (mat-list) has child elements (mat-list-item). When it renders the list it counts how many lines each item consists of (based on a css class "mat-line").

If the content of "mat-list-item" comes from an angular child component, it (mat-list) does not count the "mat-line" css classes and does not add the class "mat-2-line" to "mat-list-item" and the layout looks bad.

Does anyone have any idea how to make it count the lines in the child component?

Here is a sample app to demonstrate the issue:

https://stackblitz.com/edit/angular-nzhubj?file=src%2Fapp%2Fapp.component.html

Thanks!

ttodorov ttodorov · Accepted Answer · 2021-01-31T18:43:42

Try adding some empty DIVs around your mat-line entries like this for example:

<mat-list>
  <div mat-subheader>Folders</div>
    <mat-list-item *ngFor="let folder of folders">
      <mat-icon mat-list-icon>folder</mat-icon>
      <div class="left">
        <p mat-line>
          {{folder.name}}
        </p>
        <p mat-line>
          {{folder.updated | date}}
        </p>
      </div>
     </mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item *ngFor="let folder of folders">
     <my-list-item [section]="folder"></my-list-item>
   </mat-list-item>
</mat-list>

Or something like this:

<mat-list>
  <div mat-subheader>Folders</div>
    <mat-list-item *ngFor="let folder of folders">
      <mat-icon mat-list-icon>folder</mat-icon>
      <div class="left">
        <p mat-line>
          {{folder.name}}
        </p>
      </div>
      <div class="right">
        <p mat-line>
          {{folder.updated | date}}
        </p>
      </div>
     </mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item *ngFor="let folder of folders">
     <my-list-item [section]="folder"></my-list-item>
   </mat-list-item>
</mat-list>

mat-list-item does not count “mat-line” classes in a child component

1 Answers