title: angular 6 material design accordion openall
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;matAccordion&lt;/h1&gt;
  &lt;div&gt;
    &lt;p&gt;Accordion Options&lt;/p&gt;
    &lt;p&gt;Accordion Actions &lt;sup&gt;('Multi Expansion' mode only)&lt;/sup&gt;&lt;/p&gt;
    &lt;div&gt;
      &lt;button mat-button (click)="accordion.openAll()" &gt;Expand All&lt;/button&gt;
      &lt;button mat-button (click)="accordion.closeAll()" &gt;Collapse All&lt;/button&gt;
    &lt;/div&gt;
    &lt;p&gt;Accordion Panel(s)&lt;/p&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;mat-accordion [displayMode]="displayMode" [multi]="multi" id="newcha"
                class="mat-expansion-demo-width"&gt;
    &lt;mat-expansion-panel #panel1  [hideToggle]="hideToggle"&gt;
      &lt;mat-expansion-panel-header&gt;Section 1&lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;This is the content text that makes sense here.&lt;/p&gt;
    &lt;/mat-expansion-panel&gt;
    &lt;mat-expansion-panel #panel2 [hideToggle]="hideToggle" [disabled]="disabled"&gt;
      &lt;mat-expansion-panel-header&gt;Section 2&lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;This is the content text that makes sense here.&lt;/p&gt;
    &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  &lt;br&gt;
  &lt;hr&gt;
  &lt;div&gt;
  &lt;mat-accordion [displayMode]="displayMode1" [multi]="multi" id="testing"
                class="mat-expansion-demo-width"&gt;
    &lt;mat-expansion-panel #panel11  [hideToggle]="hideToggle1"&gt;
      &lt;mat-expansion-panel-header&gt;Section 12&lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;This is the content text that makes sense here.&lt;/p&gt;
    &lt;/mat-expansion-panel&gt;
    &lt;mat-expansion-panel #panel11 [hideToggle]="hideToggle1" [disabled]="disabled"&gt;
      &lt;mat-expansion-panel-header&gt;Section 13&lt;/mat-expansion-panel-header&gt;
      &lt;p&gt;This is the content text that makes sense here.&lt;/p&gt;
    &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;button mat-button (click)="testing.openAll()" &gt;Expand All New&lt;/button&gt;
      &lt;button mat-button (click)="testing.closeAll()" &gt;Collapse All New&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>