CODEWITHSUNDEEP
angulartypescriptangular-material
Shahabaz
Shahabaz

Reputation: 665

How to dynamically add mat-expansion panel?

I am unable to add mat-expansion-panel programmatically. I want to add them when the user calls a function over a button click. Add expansion panel as many times as want.

I tried adding the HTML tag for the mat-expansion which is one of the very incorrect ways to even try this. It just adds the tag and ignores the component.

Upvotes: 3

Views: 4579

Answers (1)

David ROSEY
David ROSEY

Reputation: 1805

You can add your mat-expansion-panel data in an array (matExpansionPanelArray) then use a *ngFor:

<mat-accordion>
    <mat-expansion-panel *ngFor="let item of items;">
        <mat-expansion-panel-header>
            <mat-panel-title>{{item.title}}</mat-panel-title>
            <mat-panel-description>{{item.description}}</mat-panel-description>
        </mat-expansion-panel-header>
        <mat-form-field>{{item.formField}}</mat-form-field>
    </mat-expansion-panel>
</mat-accordion>

So if you dynamicaly add data to your "matExpansionPanelArray", a new mat-expansion-panel will appear on your page

Upvotes: 7

Related Questions