Skip to main content

angular - How to get text input value

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 = "";
  
  getValue(val:String){
    this.inputtedText = val;
  }
}
app.component.html 

<h2>Angular - Get Text Input value</h2>

<h3>
    Inputted Name : {{inputtedText}}
</h3>

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

&nbsp;

<button 
    (click)="getValue(box1.value)"
    style="padding:12px;">
        Get Value
</button>
More Angular tutorials
Labels: