Ionic - Add component to ion-menu


#1

HI, I am developing an app for device using ionic.
I created a component( which comes on multiple pages including menu ). It works when I add the component-selector on pages, but not in ion-menu. I didn’t get the idea how to make it working with ion-menu. Please suggest what to do to fixed it or suggest how to override the ion-menu.


#2

could you share some more details --> the component code and selector, how you are using it and so on


#3

I created ChangeStore component and added it in app.module.ts file.

import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';

@Component({
  selector: 'change-store',
  templateUrl: 'change-store.html',
})
export class ChangeStore {

  constructor(public navCtrl: NavController, public viewCtrl: ViewController) {

  }

  ionViewWillEnter() {
    this.viewCtrl.showBackButton(false);
  }
}

change-store.html contains

<div class="store-change">
    <ion-icon name="pin-outline" ios="ios-pin" md="md-pin"></ion-icon>
    <div>
        <p>George, 7330</p>
        <p>Band</p>
    </div>
    <ion-icon class="icon-edit" name="md-create"></ion-icon>
</div>

I use <change-store></change-store> as selector in location page it works, but when I use this selector in ion-menu it gives runtime error ' No provider for NavController! '.

<ion-menu id="storeMenu" side="left" [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>
                <div class="menu-header-wrapper">
                    <div class="user">Welcome Smith</div>
                    <change-store></change-store>
                </div>
            </ion-title>
        </ion-toolbar>
    </ion-header>        
    <ion-content class="light-slate">
        <ion-list>
            <ion-item (click)="go_to_home()" menuClose>
                <ion-icon name="unlock" ios="ios-unlock" md="md-unlock" item-left></ion-icon>
                Login
            </ion-item>
            <ion-item (click)="go_to_about()" menuClose>
                <ion-icon name="home" ios="ios-home" md="md-home" item-left></ion-icon>
                Home
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>