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