Components: Bug: MatAccordion .openAll() is not a function

[zijianhuang]

Bug

MatAccordion .openAll() had been introduced in https://github.com/angular/material2/issues/6929 however, has never been working, despite of reports at https://github.com/angular/material2/pull/7461

What is the expected behavior?

All immediate children of MatExpansionPanel should be open, when MatAccordion.multi==true.

What is the current behavior?

Console reports that MatAccordion .openAll() is not a function.

What are the steps to reproduce?

In Angular Material Examples at https://stackblitz.com/angular/vqdmgalymjj?file=app%2Fexpansion-overview-example.html, make the following modifications:

HTML:

<button mat-raised-button (click)="openAll()">Open All</button>

<mat-accordion #myaccordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

TypeScript:

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;

  @ViewChild('myaccordion') myPanels: MatAccordion;

  openAll(){
    console.info('Accordion multi: '+this.myPanels.multi);
    this.myPanels.openAll();
  }
}

What is the use-case or motivation for changing an existing behavior?

Make sure it works as documented in https://material.angular.io/components/expansion/api

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All versions since this function was introduced, up to NG MD 6.3.2

Is there anything else we should know?

Console also reports MatAccordion.multi is undefined while it should be true as this is declared in the HTML template. So apparently ViewChild is not working very well with MatAccordion.

[crisbeto]

That's because #myaccordion is an ElementRef, not the MatAccordion instance. You have to change the reference to #myaccordion="matAccordion". Here's a working example.

[zijianhuang]

Thanks. Silly me.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}