CODEWITHSUNDEEP
ionic-frameworkionic3
Citizen
Citizen

Reputation: 12927

How do I use a Ionic 3 component on my app.html that uses NavController?

I have an Ionic 3 component that makes use of the NavController:

constructor(public navCtrl: NavController) {}

When I use this component on my lazy loaded pages, it works perfectly. When I use the same component in my global navigation by placing it in my app.html file, I get this error:

Runtime Error Cannot read property 'children' of null

This error goes away if I remove the navCtrl from the constructor. What do I need to be doing differently?

Upvotes: 0

Views: 136

Answers (1)

Garrett Barlocker
Garrett Barlocker

Reputation: 703

You can use Component Interaction to use the parent NavController within the child component. https://angular.io/guide/component-interaction

// component.ts
@Input('nav') nav: NavController;


functionUsingNavCtrl() {
   this.nav.push('NewPage');
}

// app.html
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
<component [nav]="nav"></component>

// app.ts
@ViewChild(Nav) nav: Nav;

Upvotes: 1

Related Questions