Open the first attached expansion panel in an Angular Material accordion

Question

Obviously you can use the input expanded on an Angular Material expansion panel to default a particular panel to be opened upon loading. However, I have an accordion where all of the expansion panels are generated dynamically, and all are optional, but I would like for the first panel to be opened.

I could go through each of my ngFors that use templates to generate the panels to see if it exists and then on the first index add the attribute, but there are several loops that pull in templates and it seems messy. I would like to be able to grab some property from the mat-accordion after the view has completed to see which is the first one attached to the accordion and add the attribute, but it looks like it isn't possible. Anyone know if there is some way to do this?

Answer 1

You can use first variable, I made an stackblitz, you can see here.

You can do as this way:

<mat-accordion class="example-headers-align">
  <mat-expansion-panel *ngFor="let item of [1,2,3]; first as isFirst" [expanded]="isFirst">
    <mat-expansion-panel-header>
      <mat-panel-title> {{item}} </mat-panel-title>
    </mat-expansion-panel-header>
    {{item}}
  </mat-expansion-panel>
</mat-accordion>

You can see here the use of the *ngFor variables for more information.

Answer 2

Have you tried using the ngFor "first" local variable? In this way:

<mat-accordion>
    <mat-expansion-panel *ngFor="let elem of elements; let isFirst = first" [expanded]="isFirst">
         <!--- Something Here --->
    </mat-expansion-panel>
</mat-accordion>