How to add angular material expansion panel dynamically on button click?

Question

I'm setting up a dynamic expansion panel in my Angular 7 application, I am showing a mat-expansion-panel by default in mat-accordion. Now I have an Add button, and I want if a user clicks on this button, a new mat-expansion-panel should append in mat-accordion with a small form or 4 form inputs.

I tried it with rendered2 class but it is not working for me. I might be missing something.

<mat-accordion id="quoteAccordion">
   <mat-expansion-panel>
       <mat-expansion-panel-header>
          <mat-panel-title>
             <!--  -->
               Panel Title Here
               <!--  -->
               </mat-panel-title>
                  <mat-panel-description>
                    Panel description here
                  </mat-panel-description>
       </mat-expansion-panel-header>
       <!-- Panel Body -->
           <div formArrayName="services" *ngFor="let service of services.controls; let i = index">
                <mat-form-field appearance="outline" fxFlex="30" class="pr-4">
                   <mat-label> Description</mat-label>
                   <input matInput formControlName="title" required>
                   <mat-error>Description is required!</mat-error>
                </mat-form-field>
           </div
       <!-- /Panel Body -->
       </mat-expansion-panel>
       <!-- 
           on click of [Add] button
           Need to append another expansion
           panel with form input here
        -->
</mat-accordion>
       <!--  Ends Here -->
       </div>
<button class="w-100" matTooltip="Add" type="button" mat-raised-button (click)="addAccordion()">
       <mat-icon>add</mat-icon> ADD
</button>

I am expecting the output of adding dynamic mat-expansion-panel with expansion-header and the expansion-body contains a form-input.

Thanks in advance !!

You may use *ngFor directive on <mat-expansion-panel>and set an array property on your component ts with your panels data, then simply push values to this array to have the new panels appended. — GCSDC
– GCSDC, Commented Apr 7, 2019 at 6:05

Morteza Ebrahimi · Accepted Answer · 2019-04-07 07:06:32Z

1

Try this:

Component.html

<button  type="button" mat-raised-button color="primary" (click)="addItem()">
       <mat-icon>add</mat-icon> ADD
</button>

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

    <div>details or form here</div>

  </mat-expansion-panel>

</mat-accordion>

Component.ts:

export interface myModel{
    title?:string;
    description?:string;
    ...
}


items:Array<myModel>=[{title:"default item title" , description:"default item description"}];

addItem(){
   // push object that you need to be added into array
   this.items.push({title:"new title of item"});
}

edited Apr 7, 2019 at 7:06

answered Apr 7, 2019 at 6:23

Morteza Ebrahimi

7601 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tilak Dewangan · Accepted Answer · 2019-04-07 06:17:41Z

0

I believe this is a good approach for this type of scenario.

Whenever you want to create a new set of input controls on any action (such as a click) of User, then do the followings: -

Create a variable of type an Array in component.ts and push an empty object into Array because you want to show the default control.
Now loop through this variable in component.html file using *ngFor.
Whenever user clicks on Add button, just push an empty object into the Array using Array.push(object) then angular will automatically add the new control since you have looped through the Array.

Let me know if it works or otherwise.

answered Apr 7, 2019 at 6:17

Tilak Dewangan

3611 gold badge2 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to add angular material expansion panel dynamically on button click?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related