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.
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"
}
#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>
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