Page refresh loses selected option and sets default Home as selected option

[phpweb]

Hello,

First of all thanks a lot for such a nice implementation.

You have explained very nice how to set the selected option when we navigate with a button to an option.

I have a one question. When I refresh the page then gets selected option automatically default page, in this case Home.

For example I have a menu structure: Home - Users - Products.

I chose the Users menu then the URL is http://localhost:8100/#/user-list and Users menu is selected, so far so good.

When I refresh the page (http://localhost:8100/#/user-list) then Home will be automatically selected, not the Users menu.

For sure I can send the event to the menu option on user.list.component.ts but think that I have 20 more components and 20 menus. Then I have to implement in every page. Is there a way in one place to configure selected menu with page refresh?

[phpweb]

I have found a workaround.

I added inside app.component.ts the following life cycle event inside the function :

private initializeOptions(): void { }

`

	this.navCtrl.viewDidEnter.subscribe(item =>{
		const viewController = item as ViewController;
		const refreshCurrentPage = viewController.name;
		let selectedOptionByPageRefresh = 'Home';
		if(refreshCurrentPage != this.rootPage) {
			
			this.sideMenu.collapsableItems.forEach(element => {
				if(element.targetOption.component === refreshCurrentPage){
					selectedOptionByPageRefresh = element.targetOption.displayName;
				}

				if(element.subItemsCount) {
					element.subOptions.forEach(subElement => {
						if(subElement.targetOption.component === refreshCurrentPage) {
							selectedOptionByPageRefresh = subElement.targetOption.displayName;
						}
					});
					
				}
			});
		}

		let redirectData: SideMenuRedirectEventData = {
			displayName: selectedOptionByPageRefresh
		};

		// Send the event to the side menu component
		this.eventCtrl.publish(SideMenuRedirectEvent, redirectData);
	})

           //.....

}
`

For now it is working for me till there will be another option.

[sebaferreras]

Sorry for taking so long to fix this issue.

In the last update I've added two custom decorators that should allow you to fix this issue.

Please review the Navigation outside the side menu section to find how you can use the SideMenuDisplayText or the SideMenuDisplayTextConditions custom decorators. Please also review the Breaking changes page as well.

So basically now each page can tell the side menu component which option should be marked as selected when the user enters to that page. So for example, in the following page:

// Angular
import { Component } from '@angular/core';

// Ionic
import { IonicPage } from 'ionic-angular';

// Side Menu Component
import { SideMenuDisplayText } from '../../../shared/side-menu-content/custom-decorators/side-menu-display-text.decorator';

@IonicPage()
@Component({
    selector: 'page-sub-option-one',
    templateUrl: 'sub-option-one.html'
})
@SideMenuDisplayText('Sub Option 1') // <--- Here!
export class SubOptionOnePage { }

The line @SideMenuDisplayText('Sub Option 1') tells the component that when the user enters to this page, the option with text 'Sub Option 1' should be marked as selected. So now if the user refreshes the browser, the right page should still be marked as selected:

I'll close this issue now but feel free to re-open it if you need any help. Thanks :)