expanded property of Mat Expansion Panel not triggered with back button

Question

I am using Mat Expansion Panel on a list and utilizing the expanded attribute to expand/collapse a row.

The initial state of the URL is https://company.org/link/table. When a row is expanded, I add the ID in the url I.e. this.router.navigate(['/link/table', {id: 'TABLE1'}]); and the ending url looks something like https://company.org/link/table;id=TABLE1.

Now, I am tracking back/forward buttons. Since expanding a row changes its url, using NavigationEnd I'm able to capture the browser's back/forward button clicks and am able to update the properties that should have collapsed the expansion panel.

The problem is, the expansion panel does not collapse. I tried to force detect changes with detectChanges(); of ChangeDetectorRef but it didn't work either.

Here's a sample of my constructor where I am capturing the route changes:

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private util: UtilitiesService,
  private cdr: ChangeDetectorRef
) {

  this.router.events.subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.route.paramMap.subscribe((params) => {
        this.linkTableId = params.get('id');
        if (!this.linkTableId) {
          this.cdr.detectChanges();
          console.log('Change detection forced.')
        }
      });
    }
  });

  if (this.linkTableId) {
    this.setCurrentPageData();
  } else {
    this.openUpdatedExecPanel = false;
    this.expandedPanelIndex = null;
  }

}

Here's the snippet of the HTML:

<div
  class="ui-md-12 mat-expansion-panel-div"
  *ngFor="let record of pagedData; let i = index"
  id="{{ i }}-div-ctn"
>
  <mat-expansion-panel
    #matExpPanel
    [expanded]="openUpdatedExecPanel && i === expandedPanelIndex"
    [hideToggle]="panelH._isExpanded()"
    (afterExpand)="util.scrollIntoView(i + '-div-ctn')"
  >
    <mat-expansion-panel-header
      #panelH
      class="mat-exp-panel-header"
      [ngClass]="{ 'ocular-tile': !panelH._isExpanded() }"
      (click)="updateUrlParam(record); togglePanel(panelH, i)"
    >
      <mat-panel-title>TITLE</mat-panel-title>
      <mat-panel-description>DESCRIPTION</mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</div>

You may assume that openUpdatedExecPanel and expandedPanelIndex are being set correctly and that it is working as expected except for when the browser's back/forward buttons are clicked.

How do I force the expanded attribute to recognize the changed properties?

expanded property of Mat Expansion Panel not triggered with back button

0 Answers0