components icon indicating copy to clipboard operation
components copied to clipboard

bug(mat-list): migration not converting directives

Open felhag opened this issue 3 years ago • 0 comments

Is this a regression?

  • [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When running the migration after upgrading to angular 15 it does not convert mat-list-icon and mat-line to the new attributes which are mentioned in the migration-guide. This means some examples from the documentation are broken after the update (for example List with sections ng14 vs ng15. Problem apparently not applies for mat-subheader which is still a valid directive in angular components 15.

Reproduction

Steps to reproduce:

  1. download https://stackblitz.com/run?file=src%2Fapp%2Flist-sections-example.ts
  2. npm i
  3. ng update @angular/cli @angular/core
  4. ng update @angular/material
  5. ng generate @angular/material:mdc-migration

Expected Behavior

<mat-list>
  <div mat-subheader>Folders</div>
  <mat-list-item *ngFor="let folder of folders">
    <mat-icon matListItemIcon>folder</mat-icon>
    <div matListItemTitle>{{folder.name}}</div>
    <div matListItemLine> {{folder.updated | date}} </div>
  </mat-list-item>
  <mat-divider></mat-divider>
  <div mat-subheader>Notes</div>
  <mat-list-item *ngFor="let note of notes">
    <mat-icon matListItemIcon>note</mat-icon>
    <div matListItemTitle>{{note.name}}</div>
    <div matListItemLine> {{note.updated | date}} </div>
  </mat-list-item>
</mat-list>

Actual Behavior

<mat-list>
  <div mat-subheader>Folders</div>
  <mat-list-item *ngFor="let folder of folders">
    <mat-icon mat-list-icon>folder</mat-icon>
    <div mat-line>{{folder.name}}</div>
    <div mat-line> {{folder.updated | date}} </div>
  </mat-list-item>
  <mat-divider></mat-divider>
  <div mat-subheader>Notes</div>
  <mat-list-item *ngFor="let note of notes">
    <mat-icon mat-list-icon>note</mat-icon>
    <div mat-line>{{note.name}}</div>
    <div mat-line> {{note.updated | date}} </div>
  </mat-list-item>
</mat-list>

Environment

  • Angular: 15.0.0
  • CDK/Material: 15.0.0
  • Browser(s): -
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

felhag avatar Nov 22 '22 19:11 felhag