CODEWITHSUNDEEP
angulartypescriptangular-material
fariba.j
fariba.j

Reputation: 1865

how to close a mat-accordion when other mat-accordion is opened?

I'm using Angular Material with Angular v6. I have two accordions where each accordion contains an expansion panel. How can I close the opened accordion when I open the other accordion? Both of the accordions stay open now!

Code:

<!-- first accordion -->
<mat-accordion>
    <mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub'">
      <mat-expansion-panel-header class="main-header">
        <mat-panel-title>
          <mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
          <span class="name">{{ menuitem.name }}</span>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
        <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
          <span class="grand">{{ child.name }}</span>
        </a>
      </mat-nav-list>

      <mat-accordion open>
        <mat-expansion-panel mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open" #example>
          <mat-expansion-panel-header class="child" *ngIf="childitem.grand_children">
            <mat-panel-title class="child-title">
              <mat-icon class="arrow-icon" *ngIf="!example.expanded">keyboard_arrow_right</mat-icon>
              <mat-icon *ngIf="example.expanded">keyboard_arrow_down</mat-icon>
              {{ childitem.name }}
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-nav-list *ngFor="let child of childitem.grand_children" routerLinkActive="open">
            <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="childitem.type === 'parent'" [routerLink]="['/', menuitem.state, childitem.state, child.state ]">
              <span class="grand">{{ child.name }}</span>
            </a>
          </mat-nav-list>
        </mat-expansion-panel>
      </mat-accordion>
    </mat-expansion-panel>
  </mat-accordion>

   <!-- second accordion -->
  <mat-accordion>
      <mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub1'">
        <mat-expansion-panel-header class="main-header">
          <mat-panel-title>
            <mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
            <span class="name">{{ menuitem.name }}</span>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
          <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
            <span class="grand">{{ child.name }}</span>
          </a>
        </mat-nav-list>
      </mat-expansion-panel>
    </mat-accordion>

Upvotes: 4

Views: 13314

Answers (3)

Shahrin Azuan
Shahrin Azuan

Reputation: 34

If you want to close another mat-expansion-panel when another panel is open, just put multi=false at mat-accordion.

    <mat-accordion mutli="false">
      <mat-expansion-panel hideToggle>
       <mat-expansion-panel-header>
         <mat-panel-title>
           This is the expansion title
         </mat-panel-title>
         <mat-panel-description>
           This is a summary of the content
         </mat-panel-description>
       </mat-expansion-panel-header>
         <p>This is the primary content of the panel.</p>
     </mat-expansion-panel>
   <mat-accordion>

Upvotes: 1

Panchakshari Puranmatt
Panchakshari Puranmatt

Reputation: 333

You can use index while looping and integers while not looping the mat-expansion-panel.

<mat-accordion [togglePosition]="'before'" multi>
<mat-expansion-panel [expanded]="state === 0" (opened)="setState(0)">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <p class="mt-4">Title 1</p>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-upload></app-upload>
</mat-expansion-panel>
<br>
<mat-expansion-panel [expanded]="state === 1" (opened)="setState(1)">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <p class="mt-4">Title 2</p>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-upload></app-upload>
</mat-expansion-panel>

In ts file:

step: number = -1; // -1 makes all the accordians to be closed. Can replace 0 with -1 to open the required accordion open on page load.

setState(stateNumb: number) {
  this.state = stateNumb;
}

Upvotes: 3

Felix Lemke
Felix Lemke

Reputation: 6488

Use the opened and closed Events provided by mat-expansion-panel.

<mat-expansion-panel (closed)="isOpen = false" (opened)="isOpen = true">
  [...]
</mat-expansion-panel>

In your class create a public variable, e.g. isOpen:

export class YourClass {
  isOpen: boolean;
}

Then pass isOpen as an @Input() to the other mat-expansion-panel

<mat-expansion-panel [expanded]="isOpen">
</mat-expansion-panel>

You have to implement this in both directions in order to make each accordion listen to the other one.

Upvotes: 2

Related Questions