How get input text changer with [IONIC,javascript,HTML,cordova] -

i'm starting learning javascript. i'm fallowing tutoriel version of ionic has been updated directory , folder not same. template has changer.

for each page of app, have : 1 *.html, 1 *.scss , and *.ts (not *.js)

so have dificutly developpe app. try add function, function should "username" value after change , show using alert popup code show text value of username default value ="#" , if change , presse 'enter' popup show "username = #"

so attribute can use or current value , not default value.

note: if have course/tutoriel last version on ionic, i'm interested ;)

html part of login.html

<ion-header>     <ion-navbar>         <button ion-button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>         <ion-title>login</ion-title>     </ion-navbar> <!--    <script src="login.js"></script>--> </ion-header>  <ion-content padding>      <form id="myform">         <input id="username" title="username" type="text" placeholder="username" value="#"   (change)="testusername()"  >     </form>  </ion-content> 

script part of login.ts

import {     component } '@angular/core'; import {     navcontroller } 'ionic-angular';  @component({     selector: 'page-login',     templateurl: 'login.html' })  export class loginpage {     constructor(public navctrl: navcontroller) {         }     public testusername(): void {         var username = document.getelementbyid('username');         alert('username = '+ username.getattribute("value"));     } } 

i guess working ionic 3 app uses typescript (.ts) rather .js file. ionic 3 framework works on top of typescript , angular 2/4. in order changed values in input can bind html view component file (ts file). can use ngmodel binding. try :

 <form id="myform">     <input id="username" title="username" type="text" placeholder="username" [(ngmodel)]="username"   (change)="testusername()"  > </form> 

in .ts file

export class loginpage { username:string; // can give default value here constructor(public navctrl: navcontroller) {     } public testusername(): void {     alert('username = '+this.username); // see same ngmodel binded in html }   } 

hope helps:)