Login window in Ionic 3
login.html
<ion-header>
<ion-navbar color="primary">
<ion-title text-center>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [(ngModel)]="useremail"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button color="primary" block (click)="login()">Sign In</button>
</div>
</ion-content>
login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,LoadingController,ToastController } from 'ionic-angular';
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
public useremail:any;
public password:any;
constructor(public navCtrl: NavController,
public loadingController:LoadingController,
private toastCtrl: ToastController,
public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
login(){
//this.navCtrl.push(HomePage);
let allUserLoadingController = this.loadingController.create({
content : "Loging.."
});
allUserLoadingController.present();
//this.loginProvider.loginUser(this.useremail,this.password)
allUserLoadingController.dismiss()
if(this.useremail=="JawabAdda"&&this.password=="123456"){
this.message("Login Successfully.")
}else{
this.message("username and password is not matched.")
}
}
//=========== Toast Message ===========
message(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
//=====================================
}
To Learn More in Hindi watch this Video.
Login window in Ionic 3
If love this tutorial Please Like this page