I am implementing the option for the tab to remember the last option where the user left off, I am saving the value in localStorage and it works correctly when viewed from the console, however, if the index is for example "2", it always goes to the end no matter what.
Here is my code

```
<mat-tab-group #tabs animationDuration="0ms" disableRipple  [selectedIndex]="indexSelected"
      (selectedTabChange)="onTabChanged($event)">
  <mat-tab> ... </mat-tab>
  <mat-tab> ... </mat-tab>
   <mat-tab> ... </mat-tab>
</mat-tab-group>

```

My ts:

```
  public onTabChanged(tabChangeEvent: MatTabChangeEvent): void {
    this.indexSelected = tabChangeEvent.index;
    this.localStorage.saveItem('lastTabUser', this.indexSelected);
    this.change.markForCheck();
  }

```

And

```
  ngAfterContentInit() {
    this.indexSelected = this.localStorage.getSavedItem('lastTabUser') || 0;
    this.change.detectChanges();
  }

```

I have a localStorage service (for other uses too)

```
  public saveItem(name: string, value: any): void{
    localStorage.setItem(name, JSON.stringify(value));
  }

  public getSavedItem(name: string): any{
    return JSON.parse(localStorage.getItem(name));
  }

```

I use ChangeDetectorRef to detect changes.
and i really don't understand this behavior, being that I am correctly saving the value of the last tab in the localstorage. Is it something in the AfterContent or AfterView?