How to override back button or enrich an ionic component


#1

Hello Folks!

We are using Ionic 3.4.2 for our Desktop and Mobile application.
We would like to set the title and aria-label attributes of the ionic back button.

Is there a generic way to override the ionic back button or is there a easy way to ‘enrich’ an ionic component?

For now we added the following code inside the ionic page

@ViewChild(Navbar) navbar: Navbar;

ionViewDidEnter () {
        let navbar = this.navbar;
        let backbutton = navbar.getNativeElement().querySelector('.show-back-button');
        if (backbutton !== undefined && backbutton !== null) {
            let title = 'back-title';
            backbutton.setAttribute("title", title);
        }
    }

Kind regards


#2

Do you want to change the back button text?
There is a navbar.setBackButtonText function.
Otherwise, you can change it on AppModule like following:

IonicModule.forRoot(MyApp, {
            backButtonText: '',
            backButtonIcon: 'arrow-back'            
        }),

#3

thank you for the responds but i do not want to set the button text.
We would like to set the title attribute to show a hover text and the aria-label attribute is used for accessibility.