Angular Get Text Box value On Button Click

Hello to all, welcome to therichpost.com. In this post, I will tell you, how to Get Angular TextBox value On Button Click?

I am doing this in Angular 6.

Here is the working and tested code for Get Angular textBox value on button click:

1. Here is the app.component.html file code:

<div class="jumbotron text-center">
  <h3>Angular Get Text Box value On Button Click:</h3>
</div>
<div class="container">
 <div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" #titleInput class="form-control">
  </div>
  <button type="button" (click) = "showText(titleInput.value)" class="btn btn-primary">Show Button value!</button>
</div>

2. Here is the code for app.component.ts file:

import {Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
showText(title:string) {
    if(title!="")
  {
     alert(title);
  }
  else
  {
   alert("Fill the name first!!!");
  }
  }
}

 And you are done, If have any query related to this post, then do ask questions or do comment below.