How to get value from the input element using the template reference variable – Angular

A template reference variable is used to give reference to a DOM Element. The template reference variable can then be used anywhere inside the template.

This can be done using a # symbol inside the template.

  <input #phone placeholder="phone number" />
  <button (click) = display(phone.value)>  Show your phone number</button>

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

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
     <input #phone placeholder="phone number" />
    <button (click) = display(phone.value)>  Show your phone number</button>
    <h2>  {{phoneNumber}} </h2>
  `,
  styles: [`   `]
})
export class TestComponent implements OnInit {
  public name = "Amey Raut";  
  public phoneNumber;  
  constructor() { }

  ngOnInit() {
  }

  display(inputValue){ 
    this.phoneNumber = inputValue;
    console.log(this.phoneNumber);  
    //will display value in input box (phoneNumber)
  }
   
}