CODEWITHSUNDEEP
angularangular-materialangular8
Moniya Gupta
Moniya Gupta

Reputation: 21

How to remove a dynamic component on deletion in angular?

I am trying to create a mat-expansion panel and have mat-list inside it dynamiclly. The code is as provided below:

<mat-expansion-panel *ngFor="let bAttr of bAttrList" (opened)="openPanel(bAttr)">
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{bAttr}}
              </mat-panel-title>
              <mat-panel-description>
                {{bAttr}}
              </mat-panel-description>
            </mat-expansion-panel-header>


            <mat-list *ngFor="let baValue of baValueList">
              <app-ba-update [baValue]="baValue" [bAttr]="bAttr" [lob]="lobSelected"></app-ba-update>

            </mat-list>

          </mat-expansion-panel>

Here you can see, I am trying to call another child component for each bAttr element. Inside the child element , we have the option to edit and delete the baValue. Once I delete, I need to remove the element from the list / refresh the content of currently opened mat-expansion panel's mat-list. When I expand the expansion panel, openPanel() method gets called and it sets the value of baValueList. How do I let the parent element know exactly which child element I need to remove, or tell the parent element to refresh the baValueList?

NOTE: There are multiple bAttr list and corresponding to them , there are multiple baValueList.

Upvotes: 2

Views: 975

Answers (2)

Ravi Shah
Ravi Shah

Reputation: 29

You can update the variable on open and close of the panel and on the basis of that you need to add the condition on the selector as follow:

<mat-accordion> <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> <mat-expansion-panel-header> <mat-panel-title> Self aware panel </mat-panel-title> <mat-panel-description> Currently I am {{panelOpenState ? 'open' : 'closed'}} </mat-panel-description> </mat-expansion-panel-header> <papp-ba-update *ngIf="panelOpenState">I'm visible because I am open</app-ba-update> </mat-expansion-panel> </mat-accordion>

Upvotes: 1

Ravi Shah
Ravi Shah

Reputation: 29

You need to destroy the component and load that component again. you need to have flag to open and close the expansion and put the directive *ngIf on the selector.

Upvotes: 1

Related Questions