Angular mat show previously selected tab

user_16703623 0
Viewed 447

For example I have a component A and I was on Tab Second and then I navigated to another page which is to Component B let us say page 1 and then I navigate back to Component A then the I should be on the last selected tab so for example here Second Tab.

So when I navigate back , the tab I selected before I navigate to other page should be selected , for example here I selected Second Tab and then I navigate to other page when I navigate back Second tab should be selected since this is what I selected before I navigated to other pages.

Thanks.

enter image description here

Anyone has an idea how to implement this in angular? .

#code on navigating to other page - Component A

 navigateToPage1() {
    this._router.navigate(['page1']);
  }

#code for navigating back - Component B

 navigateBackToPage() {
        this._router.navigate(['page0']);
      }

#code for checking selected tabs on Component A

 tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    this.currentTab = tabChangeEvent.index;
    if(this.currentTab !== 1) {
      this.pageHeaderTitleData.title.primary = "Users"
      this._pageEventMyList();
    }
    this.pageHeaderTitleData.title.primary = "Teams"
  }

tabs screenshot

#My tab html code Component A

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
    <mat-tab label="First">
        ...
    </mat-tab>
    <mat-tab label="Second">
        ...
    </mat-tab>
    <mat-tab label="Third">
        ...
    </mat-tab>
</mat-tab-group>
angular-material angular typescript javascript
1 Answers

You could use a shared service to store the selected tab. Let's call it UIStateService:

@Injectable({
  providedIn: 'root'
})
export class UIStateService {
  pageOneSelectedTab = 0;
  pageTwoSelectedTab = 0;
  constructor() {}
}

Use it in your page component:


  selectedIndex = 0;

  constructor(private uiStateService: UIStateService) { }

  tabChanged(event: MatTabChangeEvent) {
    this.uiStateService.pageOneSelectedTab = event.index;
  }

  ngOnInit() {
    this.selectedIndex = this.uiStateService.pageOneSelectedTab;
  }

and in your page's HTML:

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">

Check this Stackblitz example based on your code: https://angular-ivy-evbm9h.stackblitz.io

user_45523540
Related