Angular Expansion Panel - expanded property binding issue

Question

My HTML with Angular code is as below...with Admin and User Main menu items.

<a id="adminId" (click)="sideNavLink($event)">Admin</a>

<mat-accordion class="mat-accordion-setting">
  <mat-expansion-panel hideToggle id="userMgmtId" [expanded]="panelOpenState">
    <mat-expansion-panel-header>
      <mat-panel-title>User</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-panel-description id="SubMenu1" (click)="sideNavLink($event)"  [routerLink]="['/SubMenu1']" routerLinkActive="active">SubMenu1</mat-panel-description>
    <mat-panel-description id="SubMenu2" (click)="sideNavLink($event)"  [routerLink]="['/SubMenu2']" routerLinkActive="active">SubMenu2</mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>

On click of Admin Menu item, the below function fires...

sideNavLink(event: Event): void {
    const anchorId = (event.currentTarget as HTMLElement).getAttribute('id');
    if(anchorId != "userMgmtId") {
      this.panelOpenState = false;
    } 
}

Here, if you observe, when I click adminId button, then I am setting this.panelOpenState as false. But still the User Sub Menu items are not collapsing.

What could be the reason?

Answer 1

On adding the expanded attribute with round brackets, I am able to resolve this issue.

<mat-accordion class="mat-accordion-setting">
  <mat-expansion-panel hideToggle id="userMgmtId" [(expanded)]="panelOpenState">
    <mat-expansion-panel-header>
      <mat-panel-title>User</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-panel-description id="SubMenu1" (click)="sideNavLink($event)"  [routerLink]="['/SubMenu1']" routerLinkActive="active">SubMenu1</mat-panel-description>
    <mat-panel-description id="SubMenu2" (click)="sideNavLink($event)"  [routerLink]="['/SubMenu2']" routerLinkActive="active">SubMenu2</mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>