How to add icon items in side menu.when we declare navigations dynamically

Ionic Framework ionic-v3
1

APP.html

<ion-menu [content]=“content”>


Menu


  <button  menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> <ion-icon item-left [name]="p.icon"></ion-icon>
    {{p.title}}
  </button>
</ion-content>

<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>

app.component.ts

import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { VATExpert } from ‘…/pages/home/home’;
import { EventCalendar } from ‘…/pages/eventcalendar/calendar’;
import { VATinGCC } from ‘…/pages/vatingcc/vatingcc’;
import { MyVATJourney } from ‘…/pages/myvatjourney/vatjourney’;
import { VATCalculator } from ‘…/pages/vatcalculator/calculator’;
import { ContactUs } from ‘…/pages/contactus/contact’;
import { SignOut } from ‘…/pages/signout/signout’;
import {Login} from’…/pages/login/login’;
//import { LiveChat } from ‘…/pages/livechat/chat’;

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(Nav) nav: Nav;

rootPage: any = Login;

pages: Array<{title: string, component: any, Icon: any}>;

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
 
  { title: 'Event Calendar', component: EventCalendar, Icon :'ios-home-outline' },
  { title: 'VAT in GCC', component: VATinGCC , Icon :'ios-home-outline' },
  { title: 'My VAT Journey', component: MyVATJourney , Icon : 'ios-home-outline'},
  { title: 'VAT Calculator', component: VATCalculator , Icon : 'ios-home-outline' },
  { title: 'Contact Us', component: ContactUs , Icon : 'ios-home-outline'},
  { title: 'Sign Out', component: SignOut , Icon :'ios-home-outline' }
];

}

initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
this.nav.setRoot(page.component);
}

}

2 
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.icon}}"></ion-icon>
         &nbsp; &nbsp;{{p.title}}
      </button>
    </ion-list>
1 Like
3

Its working thank you

4
  1. create the app using with command
    ionic start {appname} sidemenu
  2. create the pages
    ionic g page {page name}
  3. import the pages in app.component.tswhat u have created as shown below
    import { VATExpert } from ‘…/pages/home/home’;
    import { EventCalendar } from ‘…/pages/eventcalendar/calendar’;
    import { VATinGCC } from ‘…/pages/vatingcc/vatingcc’;
    import { MyVATJourney } from ‘…/pages/myvatjourney/vatjourney’;
    import { VATCalculator } from ‘…/pages/vatcalculator/calculator’;
    import { ContactUs } from ‘…/pages/contactus/contact’;
    import { SignOut } from ‘…/pages/signout/signout’;
    import {Login} from’…/pages/login/login’;
    //import { LiveChat } from ‘…/pages/livechat/chat’;

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
@ViewChild(Nav) nav: Nav;

rootPage: any = Login;

pages: Array<{title: string, component: any,icon: any}>;

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
 
  { title: 'Event Calendar', component: EventCalendar,icon:'calendar' },
  { title: 'VAT in GCC', component: VATinGCC ,icon:'trending-up' },
  { title: 'My VAT Journey', component: MyVATJourney,icon:'jet' },
  { title: 'VAT Calculator', component: VATCalculator ,icon:'calculator'},
  { title: 'Contact Us', component: ContactUs,icon:'call' },
  { title: 'Sign Out', component: SignOut,icon:'logout' }
];

}

initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
this.nav.setRoot(page.component);
}

}
4)import the pages you created in to app.module.ts as shown below
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;

import { MyApp } from ‘./app.component’;
import { VATExpert } from ‘…/pages/home/home’;
import { EventCalendar } from ‘…/pages/eventcalendar/calendar’;
import { VATinGCC } from ‘…/pages/vatingcc/vatingcc’;
import {Login} from’…/pages/login/login’;

import { MyVATJourney } from ‘…/pages/myvatjourney/vatjourney’;
import { VATCalculator } from ‘…/pages/vatcalculator/calculator’;

import { ContactUs } from ‘…/pages/contactus/contact’;
import { SignOut } from ‘…/pages/signout/signout’;

//import { LiveChat } from ‘…/pages/livechat/chat’;

import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

@NgModule({
declarations: [
MyApp,
VATExpert,
EventCalendar,
VATinGCC,
MyVATJourney,
VATCalculator,
ContactUs,
SignOut,
Login
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
VATExpert,
EventCalendar,
VATinGCC,
MyVATJourney,
VATCalculator,
ContactUs,
SignOut,
Login
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
5) in the app.html u can define menus statically or dynamically. It am shohwing e sample code how to define dynamically
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;

import { MyApp } from ‘./app.component’;
import { VATExpert } from ‘…/pages/home/home’;
import { EventCalendar } from ‘…/pages/eventcalendar/calendar’;
import { VATinGCC } from ‘…/pages/vatingcc/vatingcc’;
import {Login} from’…/pages/login/login’;

import { MyVATJourney } from ‘…/pages/myvatjourney/vatjourney’;
import { VATCalculator } from ‘…/pages/vatcalculator/calculator’;

import { ContactUs } from ‘…/pages/contactus/contact’;
import { SignOut } from ‘…/pages/signout/signout’;

//import { LiveChat } from ‘…/pages/livechat/chat’;

import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

@NgModule({
declarations: [
MyApp,
VATExpert,
EventCalendar,
VATinGCC,
MyVATJourney,
VATCalculator,
ContactUs,
SignOut,
Login
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
VATExpert,
EventCalendar,
VATinGCC,
MyVATJourney,
VATCalculator,
ContactUs,
SignOut,
Login
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}