Error in ./HomePage class HomePage - caused by: No provider for Navbar!

Ionic Framework ionic-v3
1

Hi, i’m new at Ionic and i need to set backButtonClick() method. But how can i use Navbar class? This way i’m getting this error

…
import { NavController, NavParams, Navbar } from ‘ionic-angular’;
…

@Component({
selector: ‘page-editor’,
templateUrl: ‘class-editor.html’

})
export class ClassName{

constructor(public navCtrl: NavController, public navParams: NavParams, public navbar: Navbar) {
}

Error:
Error: No provider for Navbar!
at NoProviderError.BaseError [as constructor] (http://localhost:8100/build/main.js:7445:34)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/main.js:51992:16)
at new NoProviderError (http://localhost:8100/build/main.js:52023:16)
at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:96744:19)
at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:96772:25)
at ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:96735:25)
at ReflectiveInjector.get (http://localhost:8100/build/main.js:96544:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:52694:52)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8100/build/main.js:97286:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8100/build/main.js:97528:49)

Am i using it the right way?

Thanks,
David

2

that’s normal. Navbar should note be use like that.
It’s supposed to be used to retrieve the current navBar Element on the current page.

For example on you page.html

<ion-navbar #navbar color="primary">
    <ion-title>Whatever</ion-title>
    <ion-buttons right>
      <button icon-only ion-button>
        <ion-icon name='pause'></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

Note that the navbar is declared using #navbar id.
Then on your page.ts, you supposed to do this, to retrieve the navbar element

import { NavController, NavParams, Navbar } from 'ionic-angular';
.
.
.
.
export class Page {

@ViewChild('navbar') navBar: Navbar;

}

and next you can use it as you want:

this.navBar. .... (whatever you want)

Hope, it helps.