Not able to navigate to submenus in Angular when the submenus are generating upon clicking of...

My Application is built in Angular, I came to a scenario where I am not able to navigate back to sub-menus. So the module is built like this.

We have list of menus which are defined in html template.

<ul role="menu">
<ng-container *ngIf="!selectedMenu">
<li role="menuitem"
tabindex="0"
class="menu-item"
(click)="navigateToMenu('apple')"
<mat-icon class="icon" aria-hidden="true">
fingerprint
</mat-icon>
<div class="title">
{{'report.apple.title' | translate}}
</div>
</li>
<li>
........
</li>
</ng-container>
</ul>


And upon clicking upon any of the menus, It loads the submenus related to the selected menus.

navigateToMenu(menu: string): void {
this.selectedMenu = menu;
this.loadChildMenus(menu);
this.router.navigate(['/reports', menu]);
this.store.dispatch(sharedActions.setPreviousRoute({ previousRoute: 'reports' }));
}



loadChildMenus(menu: string): void {
switch (menu) {
case 'apple':
this.subMenuOptions = [
{ icon: 'corporate_fare', title: 'report.apple.sauce.title', route: 'reports/appleSauce' },
];
break;
}
}


The childMenu, we are iterating in the same html page as main menu, using selectedMenu flag in ngIf

<ng-container *ngIf="selectedMenu">
<li *ngFor="let option of subMenuOptions"
role="menuitem"
class="menu-item"
(click)="router.navigateByUrl(option.route + '?paramKey1=' + option?.reportName + '&paramKey2=' + option?.title)">
<mat-icon class="icon material-symbols-outlined icon-filled" aria-hidden="true">
{{ option.icon }}
</mat-icon>
<div class="title">
{{ option.title | translate }}
</div>
</li>
</ng-container>


And upon clicking the childmenu, in this case appleSauce it goes to appleSauce page. But then I have a backButton embedded to header which is taking the user directly back to the mainMenu rather than taking the user back to submenu which is appleSauce.

The back button code is like this.

<button mat-icon-button id="back-button" (click)="goToBack()">
<mat-icon>arrow_back</mat-icon>
</button>


and the goToBack() function is like:

goToBack() {
if (this.previousRoute$ === 'store-management') {
this.store.dispatch(sharedActions.startLoadingSpinner());
this.store.dispatch(storeManagementAction.refreshEnventoryAndStaffs({ refreshStoreLimits: true }));
this.navigatedBack.next();
this.store.dispatch(sharedActions.setPreviousRoute({ previousRoute: '' }));
this.store.dispatch(storeManagementAction.setRequestData({ requestData: [] }));
}else {
this.router.navigate([this.previousRoute$], { state: { data: { isLoaded: true } } }).then(() => {
this.store.dispatch(sharedActions.setPreviousRoute({ previousRoute: '' }));
});
}


}

Continue reading...