I have multiple mat-expansion panels in my Page to display various Info about a customer such as Address, Contact, Personal Info, etc. If I open one expansion panel (suppose Address) and then navigate from one customer page to another customer page then also the Address panel of another customer is opened on page load. How can I close all expansion panel on page reload. Code for Expansion Panel:

 <div class="row">
                <div class="address-card col-md-12">
                  <mat-accordion>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                          Address Details
                        </mat-panel-title>
                      </mat-expansion-panel-header>


                              <br />
                              <mat-label *ngIf="element.addressLine1 != null"> Address: {{ element.addressLine1 + ' ' }} </mat-label>
                              <mat-label *ngIf="element.addressLine2 != null">
                                {{ element.addressLine2 + ' ' }}
                              </mat-label>
                              <mat-label *ngIf="element.addressLine3 != null">
                                {{ element.addressLine3 }}
                              </mat-label>
                              <br />
                              <mat-label> City: {{ element.city }}</mat-label>
                              <br />
                              <mat-label> Province: {{ element.province }}</mat-label>
                              <br />
                              <mat-label> Postal Code: {{ element.postalCode }}</mat-label>
                              <br />
                              <mat-label> Country: {{ element.country }}</mat-label>
                              <br />
                              <mat-label>Agreement Id : [</mat-label>
                              <mat-label *ngFor="let agreementIds of element.agreement">
                                {{ agreementIds.agreementId + ' ' }}
                              </mat-label>

                              <br />
                            </div>
                          </div>                          
                    </mat-expansion-panel>
                  </mat-accordion>
                </div>
              </div>

0 Answers