Ionic2 - add output to sidemenu

Question

I am using the sidemenu template to start my application. I want to add a button to sidemenu so that the user can run logout alert modal to confirm the logout. Here is my code:

app.component.ts:

 import { Component, ViewChild } from '@angular/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar, Splashscreen } from 'ionic-native'; import { Home } from '../pages/home/home'; import { Profile } from '../pages/profile/profile'; import { Logout } from '../pages/logout/logout'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = Home; pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public logout:Logout) { this.initializeApp(); // used for an example of ngFor and navigation this.pages = [ { title: 'Home', component: Home }, { title: 'Profile', component: Profile } ]; } 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. StatusBar.styleDefault(); 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); } logoutApp(){ ///<-- call from static button this.logout.presentConfirm(); ///<-- call } } 

app.html:

 <ion-menu [content]="content"> <ion-content> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> <button ion-item (click)="logoutApp()"> <!--Add this static button for logout--> Log Out </button> </ion-list> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

app.module.ts:

 import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { Home } from '../pages/home/home'; import { Profile } from '../pages/profile/profile'; import { Logout } from '../pages/logout/logout'; @NgModule({ declarations: [ MyApp, Home, Profile, Logout ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Home, Profile, Logout ], providers: [] }) export class AppModule {} 

logout.ts:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ template: `` }) export class Logout { constructor( public alertCtrl: AlertController ) { } presentConfirm() { let alert = this.alertCtrl.create({ title: 'Confirm Log Out', message: 'Are you sure you want to log out?', buttons: [ { text: 'Cancel', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }, { text: 'Log Out', handler: () => { console.log('Logged out'); } } ] }); alert.present(); } } 

Based on my knowledge, this should be enough. However, I received an error message:

45EXCEPTION: Error in. / MyApp class MyApp_Host - built-in template: 0: 0 caused by: No provider to exit the system!

But why do we need a provider here? Is there something I missed?

Answer 1

Logout not a provider (it is a component), but you are trying to enter it into MyApp . In appearance, this is not like what you intend to make a Logout component. In this case, instead of replace @Component() , use @Injectable()

 import { Injectable } from '@angular/core'; @Injectable() export class Logout { } 

Then remove it from @NgModule.declarations and @NgModule.entryComponent and add it to @NgModule.providers

 @NgModule({ declarations: [ // Logout ], entryComponents: [ // Logout ], providers: [ Logout ] }) class AppModule {} 

If Logout should be a component, and you want to have access to the method from it inside MyApp , then you should instead create a service that can be entered in both Logout and MyApp , which can use the functionality of the service to present a warning.

Answer 2

I will find out what will happen. I think this is the solution.

With the alert controller we do not need another component. just add alert controller directly to app.component.ts , then call presentalert() function:

 import { Component, ViewChild } from '@angular/core'; import { Nav, Platform, AlertController} from 'ionic-angular';///<-- add AlertController import { StatusBar, Splashscreen } from 'ionic-native'; import { Home } from '../pages/home/home'; import { Profile } from '../pages/profile/profile'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = Home; pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public alertCtrl: AlertController // , public logout:Logout ) { this.initializeApp(); // used for an example of ngFor and navigation this.pages = [ { title: 'Home', component: Home }, { title: 'Participate', component: Participate }, { title: 'Adopt', component: Adopt }, { title: 'Result', component: Result }, { title: 'Profile', component: Profile } ]; } initializeApp() { this.platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); }); } openPage(page) { this.nav.setRoot(page.component); } presentLogout() { ///<-- call this function straight with static button in html let alert = this.alertCtrl.create({ title: 'Confirm Log Out', message: 'Are you sure you want to log out?', buttons: [ { text: 'Cancel', role: 'cancel', handler: () => { console.log('Cancel clicked'); } }, { text: 'Log Out', handler: () => { console.log('Logged out'); } } ] }); alert.present(); } } 

You don't even need a component.