Ionic2: use getActive() to change button color for the active page

Question

I have a nav component which I am using on 4 pages, I want to be able to change the color of active page's button in the nav component. In Ionic app doc's for nav controller I found getActive() instance, but I can't figure out how to achieve the desired result with it. I'm using the following code to push to a new view.

viewPage2(){
 this.navCtrl.push(Page2);
}

<button ion-button (click)="viewPage2()" color="dark" clear full>Page 2</button>

Could you please add some more code? Is it a custom component or just the default `ion-navbar`? — sebaferreras, Mar 24 '17 at 06:24
Great, please take a look at the first option of my answer... — sebaferreras, Mar 24 '17 at 14:13
Thank you, I'm trying it right now I will let you know how it goes — DN0300, Mar 24 '17 at 14:13

score 0 · Answer 1 · answered Mar 24 '17 at 04:57

NavController getActive() returns the ViewController of the Active page. Looking at the API of ViewController you could try using getContentRef():

this.navCtrl.getActive().contentRef().nativeElement.getElementById("button_id")

Once you have the element you could change the color.

score 0 · Answer 2 · answered Mar 24 '17 at 07:37

Even though getting the html element by its id may work, modifying the DOM directly is not the recommended way to do things in Ionic.

First option:

If that's a custom component, you can always expose a public method in that component, and get the reference by using ViewChild

@Component({...})
export class NavCustomComponent {

    public activePage: string = 'page1';

    //...

    public changeActivePage(pageName: string): void {
        this.activePage = pageName;
    }

    // ...
}

And in your view:

<button ion-button (click)="viewPage2()" [color]="activePage === 'page2' ? 'light' : 'dark'" clear full>Page 2</button>

Then in the page where you're trying to modify the component:

@Component({...})
export class DemoPage {
    @ViewChild(NavCustomComponent) navCustomComponent: NavCustomComponent;
}

and then use that reference to call that public method:

this.navCustomComponent.changeActivePage('page2');

Second option:

If that's not a custom component, or you just want to make things even simpler, you can just Events. Whereever you're defining the code of that nav component, (or in your app.component.ts file to make it global for the entire app) subscribe to the event:

public activePage: string = 'page1';

constructor(public events: Events, ...) {
    events.subscribe('page:selected', (pageName) => {
        this.activePage = pageName;
    });
}

Again, in your view:

<button ion-button (click)="viewPage2()" [color]="activePage === 'page2' ? 'light' : 'dark'" clear full>Page 2</button>

And then in the component where you want to change the color, just publish that event:

events.publish('page:selected', 'page2');

I just tried it out getting the follow error `Can't construct a query for the property "navCustomComponent" of "Page2" since the query selector wasn't defined.` — DN0300, Mar 24 '17 at 14:30
I am adding the reference call in the constructor of the page 2, to me thats where it made the most sense `this.navCustomComponent.changeActivePage('page2');` — DN0300, Mar 24 '17 at 14:37
I guess that in the constructor the view is not yet ready. Please take a look at [this post](http://stackoverflow.com/questions/39958199/cant-get-to-viewchildren-in-parent-component) and try by using in the `ngAfterViewInit` lifecycle event — sebaferreras, Mar 24 '17 at 14:39
No luck, same error even after calling it in `ngAfterViewInit` — DN0300, Mar 24 '17 at 15:04
Sure here it is `export class Page1 { @ViewChild(NavcustomComponent) navCustomComponent: NavcustomComponent; constructor(public navCtrl: NavController) { } ngAfterViewInit() { this.navCustomComponent.changeActivePage('Page1'); } }` — DN0300, Mar 24 '17 at 15:11

Ionic2: use getActive() to change button color for the active page

2 Answers2