Share the post

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

Simple Login Example In Ionic framework:

Please find below code for login.html :

  Generated template for the LoginPage page.

  See for more info on
  Ionic pages and navigation.

<ion-content padding>

      <ion-label floating>Username</ion-label>
      <ion-input type="text" [(ngModel)]="username" name="username" id="username"></ion-input>

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


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

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 for more info on
 * Ionic pages and navigation.

  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() {

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

In the 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 :


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

Leave a Comment