I am working with the sidemenu template to kick off my application. I aim to incorporate a button within the sidemenu that enables users to trigger a modal alert for confirming logout. Below is the code snippet:
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(() => {
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
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();
}
}
From what I know, everything appears to be in order. However, an error has popped up:
45EXCEPTION: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: No provider for Logout!
But why is a provider required here? Did I overlook something?