I’m developing a dynamic mat-tab in Angular 11.2.14 and using material 11.2.12.
here is my template

<mat-tab-group
      animationDuration="0ms"
      style="width: 100%"
      [disableRipple]="true"
      [(selectedIndex)]="activeTabIndex"
      (selectedIndexChange)="onTabChange($event)"
    >
      <mat-tab *ngFor="let property of propertyList" [label]="property.name">
//
</mat-tab>
    </mat-tab-group>

and here is my typescript component

ngOnInit(): void {
    this.userInfo().then(() => {
      const storedIndex = localStorage.getItem('activeTabIndex');
      if (storedIndex !== null) {
        console.log('Not Null');
        console.log(storedIndex);

        this.activeTabIndex = parseInt(storedIndex);
        console.log(this.activeTabIndex);
      } else {
        console.log('Null');

        this.activeTabIndex = 0;
      }
    });
  }

  onTabChange(event: number) {
    this.activeTabIndex = event;
    localStorage.setItem('activeTabIndex', event.toString());
  }

on page load, the localStorage value is set to 0 but the user does not change the tab yet, why does it trigger the onTabChange method?

I cant find the solution anywhere, and I am expecting the log to show Not Null on initial page load , and Not Null when navigating using browser back button. As of right now it shows ‘Not Null’ on both occasion.