Anil Singh | Code-sample.com

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 – ...

What Is a Template Reference Variable? A template reference variable is a way of capturing a reference to a specific element, component, directive, and pipe so that it can be used someplace in the same template HTML. You should declare a reference variable using the hash symbol (#). The Angular components and directives only match selectors for classes that are declared in the Angular module. Template Reference Variable Syntax – You can use a template reference variable by two ways. 1.       Using hash symbol (#) 2.       Using reference symbol (ref-) The following examples of specifying a template reference variable using Input Text Box – I have declared a reference variable “cellnumber” using the hash symbol (#) and reference symbol (ref-) . < input type = "text" ref-cellnumber > //cellnumber will be a template reference variable. And < input # cellnumber placeholder = "Cell number" ...