How to know which page you are on (from a provider)?


#1

Hi all –

I have generated a blank starter template, and added a component/Page called TopNav, in which I have buttons that navigate through the app. So far so good and it works really well.

Now, I want to change the active state of the buttons contained in my TopNav, depending on what page I am on. I thought using a provider/service to communicate the state (which page I am on) to TopNav would be a straightforward thing to do, but my problem is that I have not found any way that works to get the current page from within my provider/service.

Am I doing things right?
In short: What’s the best way to communicate which page I am on, so that I can set the correct active button state in TopNav?

THANKS


#2

So using a provider/service to let any of your pages know which page you are currently on does NOT work in the case described above (where you have a topnav that waits for the provider to report back which page you are on), as the topnav gets executed before the provider can propagate through which page you are on. This is very weird, and I guess it could be solved with a promise, but it just feels counter intuitive. Anyone chime in, please if I am doing it wrong, but how I got it to work ultimately was to check in the constructor function of the topnav component which page you are on and then style accordingly, e.g.

(after importing thew viewcontroller)

constructor(public viewCtrl: ViewController) {

this.currentpage = this.viewCtrl.component.name;

  	if (this.currentpage == "Page1") {this.onPageOne = true; this.onPageTwo = false; this.onPageThree = false;}
  	if (this.currentpage == "Page2") {this.onPageOne = false; this.onPageTwo = true; this.onPageThree = false;}
	if (this.currentpage == "Page3") {this.onPageOne = false; this.onPageTwo = false; this.onPageThree = true;}

}

this is a bit clumsily written, but it was just for getting it to work :slight_smile: In the html part of the topnav component you then use ngclass styling, like so:

where textandiconactive is my very terrible class name for signaling that particular button is active…

sorry, need a coffee for better writing :wink: