Expand angular material accordion

user_10389384 0
Viewed 3266

I have 2 different accordion in same page. each accordion has multiple expansion panel. how to close all the expanded panel from 2 accordions and open currently selected expansion panel?? i can able to close current accordion's expansion panel but other one remains open. and two accordion does the same except it fetches data from different list and some div comes between two accordion

`<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
        <mat-expansion-panel-header>
           <mat-panel-title>
              //something
           </mat-panel-title>
        </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion> 
<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
      <mat-expansion-panel-header>
         <mat-panel-title>
              //something
         </mat-panel-title>
      </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion>`
angular-material angular
1 Answers

You can close all other panels when you open one of them:

TS

@ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;

closeOtherPanels(openPanel: MatExpansionPanel) {
    this.panels.forEach(panel => {
        if (panel !== openPanel) {
            panel.close();
        }
    });
}

HTML

<mat-accordion [multi]= "true">
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" #panel (opened)="closeOtherPanels(panel)" >
        <mat-expansion-panel-header>
           <mat-panel-title>
              //something
           </mat-panel-title>
        </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion> 
<mat-accordion [multi]= "true">
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" #panel (opened)="closeOtherPanels(panel)" >
      <mat-expansion-panel-header>
         <mat-panel-title>
              //something
         </mat-panel-title>
      </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion>
user_92262130
Related