How to get user input from a template reference variable?

This is the other way to get the user data. It is also called #var.

“A template reference variable is mostly a reference to a DOM element within a template. It can also be a reference to Angular components or directives and others.”

It looks like this.

<input #name placeholder="Enter Name">

The following example shows to get user input from a template reference variable - template-reference.component.ts

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

@Component({

  selector: 'app-template-reference',

  templateUrl: './template-reference.component.html',

  styleUrls: ['./template-reference.component.css']

})

export class TemplateReferenceComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

And template-reference.component.html –

<div class="event">

  <button #keydownVal (keydown)="0"></button>

  <p>

    {{keydownVal.value}}

  </p>

</div>

For more detail kindly refer the link https://www.code-sample.com/2018/05/angular-6-7-documentation-and-examples.html