Migration: td expansion panel

Jump to bottom

Christian Memije edited this page Feb 11, 2020 · 1 revision

Migrating td-expansion-panel to mat-expansion panel

Migrating to mat-expansion panel starts with using the mat-expansion-panel tag.

To see inputs outputs and methods for mat-expansion-panel visit the API reference for Angular Material expansion.

Label and sub-label differences

<mat-expansion-panel> places what was known as label and sublabel inside the <mat-expansion-panel-header> tag.
- Inside <mat-expansion-panel-header> label and sub label are broken down into custom tags that live as siblings they are renamed as follows.
  - For label use: mat-panel-title
  - For sublabel use: mat-panel-description

Example Usage Before

<td-expansion-panel 
	label="Expansion Name" 
	sublabel="Expansion Description">
	Content goes here
</td-expansion-panel>

After

<mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
	      Expansion Name
      </mat-panel-title>
      <mat-panel-description>
        Expansion Description
      </mat-panel-description>
    </mat-expansion-panel-header>
    Content goes here
</mat-expansion-panel>

Resources

To learn more about mat-expansion-panel visit the Angular Material Docs site.