IONIC V3 | SIMPLE LOGIN EXAMPLE | IONIC BASICS

Share the post

IONIC 3 SIMPLE LOGIN EXAMPLE | BASICS

 Hello All, Today we will see the using ionic 3 simple login example. In this example we will implement the input box for username & password and one button for submit the data. We will captured the username & password input box values on clicking of submit button. This will be the simple login example using ionic framework. So, let’s start.  

Simple Login Example Using Ionic framework:

Please find below code for login.html :

<!--
  Generated template for the LoginPage page.


  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>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)]="username" name="username" id="username"></ion-input>
    </ion-item>


    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" [(ngModel)]="password" name="password" id="password" value=""></ion-input>
    </ion-item>


  </ion-list>


  <div padding>
    <button ion-button color="primary" block (click)="signIn()">Sign In</button>
  </div>
</ion-content>

Please find below code for login.ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from "../home/home";
import { CommonProvider } from "../../providers/common/common";
import { RestProvider } from "../../providers/rest/rest";


/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */


@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {


  username: string = '';
  password: string = '';


  constructor(public navCtrl: NavController, public navParams: NavParams, private rest: RestProvider, private cp: CommonProvider) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }


  signIn() {
    console.log(this.username);
    console.log(this.password);


    if (this.username != '' && this.password != '') {
      //to Redirect from one page to another use below code
      this.navCtrl.setRoot(HomePage);
    } else {
      alert("Please enter username & password");
    }
  }
}

In above example, we can able to see the log for username & password on clicking of Sign In button. If we don’t write the values for username Or password then we will get the error as Please enter username & password.

Output :

output
Output

And if we enter username & password then we can able to redirect on homepage on click on Sign In button. So, this is the basic example for login page. If you looking for more tutorials related to develop mobile application using ionic framework & angular then click here.

Leave a Comment