import {AboutPage} from '../about/about';

@Component({`
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
//txtUserName: string;
//txtPassword: string;
  constructor(public navCtrl: NavController , public alertCtrl: AlertController) {

  }


myDefaultAlert( utitle:string , message:string)
    {
      let alert = this.alertCtrl.create({
             title: utitle ,
             subTitle: message,
             buttons:['ok']

            })
            alert.present();
    }

 test( txtUserName , txtPassword)
{
var txtUserNaem=document.getElementById("txtUserName");
var txtPassword=document.getElementById("txtPassword");


     if( txtPassword.value !='123') //that show error
    {
            this.myDefaultAlert("Invalid Password Warning!","Plz Enter correct Password to Login")
            txtPassword.value=" ";   //that show error
            txtPassword.focus="true"; //that show error
    }
    else
    {
           this.navCtrl.push(AboutPage ,{

    val: 'how r you'
    });
            //this.myDefaultAlert("Wellcome",txtUser.getValue())
    }

}



}


**.html file**
<ion-header>
  <ion-navbar>
    <ion-title>
    <h1 align="center">  Login App </h1>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<ion-list >

  <ion-item>
    <ion-label floating >Username</ion-label>
    <ion-input  type="text" id="txtUserName" ></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password" id="txtPassword"></ion-input>
  </ion-item>

</ion-list>
<button class="button" ion-button full round (click)= " test(txtUserName,txtPassword); " >Login</button>
</ion-content>