What is template referece in Anulgar

Imgur

What is template referece in Anulgar?

Angular allows creating a reference of DOM element in template By doing this you can reference this variable anywhere in the template.

To create template reference prefix the variable name with #

<input  type='text'  #input>

Let’s consider the following code snippet


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

@Component({
  selector: 'app-root',
  template: `
  <label>Enter Your Email</label>
  <input type='text' #input (focus)="input.value='hello'">
  `,
  styles: []
})
export class AppComponent implements OnInit {
  
 
  constructor(){

  }
  ngOnInit(): void {
    
  }
}

In the above example, I have created one template reference for input filed named #input. When the user focuses on the input filed, I am setting the input field value as hello by using the template reference variable. You can also access this variable in the component class using @ViewChild.

Reactions

Post a Comment

0 Comments

Close Menu