Skip to main content

angular - Text input on change listener

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  inputtedText:String = "";
  getData(val:String){
    this.inputtedText = val;
  }
}
app.component.html 

<h2>Angular Text Input On Change Listener</h2>

<input 
    type="text" 
    placeholder="Type your name here." 
    (input)="getData(box1.value)"
    style="padding:12px; font-size:16px;"
    #box1>

<h3>
    Inputted Name : 
    {{inputtedText}}
</h3>
More Angular tutorials
Labels: