如何在单击按钮时动态添加角材扩展面板？

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

Answer 1

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

1. 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.
2. Now loop through this variable in component.html file using *ngFor .
3. 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.

Answer 2

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"});
}