angular 6 material design accordion openall

user_10315055 0
Viewed 11305

I tried to have two accordions group with different data in my angular application like the code which i have mentioned below but I don't know how to use two same components in my app.

import { OnInit } from '@angular/core';
import { Component, ViewChild, ViewEncapsulation} from '@angular/core';
import {MatAccordion} from '@angular/material';

@Component({
  selector: 'app-demo-accordion',
  templateUrl: './demo-accordion.component.html',
  styleUrls: ['./demo-accordion.component.css']
})
export class DemoAccordionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @ViewChild(MatAccordion) accordion: MatAccordion;
  @ViewChild(MatAccordion) testing: MatAccordion;
  displayMode: string = 'default';
  displayMode1: string = 'default';
  multi = true;
  hideToggle = false;
  hideToggle1 = false;
  disabled = false;
  showPanel3 = true;
  panel11 = false;
  expandedHeight: string;
  collapsedHeight: string;
}
<h1>matAccordion</h1>
<div>
  <p>Accordion Options</p>
  <p>Accordion Actions <sup>('Multi Expansion' mode only)</sup></p>
  <div>
    <button mat-button (click)="accordion.openAll()" >Expand All</button>
    <button mat-button (click)="accordion.closeAll()" >Collapse All</button>
  </div>
  <p>Accordion Panel(s)</p>
</div>
<br>
<mat-accordion [displayMode]="displayMode" [multi]="multi" id="newcha"
              class="mat-expansion-demo-width">
  <mat-expansion-panel #panel1  [hideToggle]="hideToggle">
    <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  <mat-expansion-panel #panel2 [hideToggle]="hideToggle" [disabled]="disabled">
    <mat-expansion-panel-header>Section 2</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
</mat-accordion>
<br>
<hr>
<div>
<mat-accordion [displayMode]="displayMode1" [multi]="multi" id="testing"
              class="mat-expansion-demo-width">
  <mat-expansion-panel #panel11  [hideToggle]="hideToggle1">
    <mat-expansion-panel-header>Section 12</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  <mat-expansion-panel #panel11 [hideToggle]="hideToggle1" [disabled]="disabled">
    <mat-expansion-panel-header>Section 13</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
</mat-accordion>
</div>
<div>
    <button mat-button (click)="testing.openAll()" >Expand All New</button>
    <button mat-button (click)="testing.closeAll()" >Collapse All New</button>
</div>

Now if i try to click the Expand All New Button it have to do the openAll for 2nd Accordion but it is opening the 1st Accordion How to access the specific accordion in Angular Material Design? Like if i have two accordions with which parameter i can access the specific accordions?

angular-material-6 angular-material angular
2 Answers

You can make a few minor changes to get this working.

Change:

@ViewChild(MatAccordion) accordion: MatAccordion;
@ViewChild(MatAccordion) testing: MatAccordion;

to:

@ViewChild('firstAccordion') firstAccordion: MatAccordion;
@ViewChild('secondAccordion') secondAccordion: MatAccordion;

Add in some functions:

openAllFirst() {
    this.firstAccordion.openAll();
}
closeAllFirst() {
    this.firstAccordion.closeAll();
}
openAllSecond() {
    this.secondAccordion.openAll();
}
closeAllSecond() {
    this.secondAccordion.closeAll();
}

And in the HTML, add the following to the two accordions:

<mat-accordion ....  #firstAccordion="matAccordion">
<mat-accordion ....  #secondAccordion="matAccordion">

And change the buttons to the new functions:

(click)="openAllFirst()"

I've copied your code above into Stackblitz, and made these changes.

Stackblitz - Multiple accordion expand all

user_61641860
user_93793290
Related