TEMPLATE REFERENCE VARIABLE IN ANGULAR
Template Reference Variable In Angular

In This Blog, you will learn template reference variable in angular and how to get the value of textbox in angular application. After getting the textbox’s value you can perform variety of operations in angular.

Binding In Angular

Template Reference Variable In Angular

  • In Angular, the Template reference variable is a reference to any DOM element, component or a directive in the Template.
  • We can use it elsewhere in the template.
  • We can also pass it to a method in the component. It can contain a reference to elements like input, h1, div, etc

Defining Template Reference variable

In Angular, we declare Template reference variables using # followed by the name of the variable (#variable)

Angular Template Reference Variable

  • In Angular, we can get any property value by using Template Reference Variable e-g: value, name, placeholder etc
  • We can refer to any Dom elements by using Template Reference Variable.
  • We can check which DOM element is stored in Template Reference Variable.

Source Code

template-reference.component.ts File Code

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 {

  public displayName = '';
  getName(fname:string, lname:string){
    this.displayName = fname + " " + lname;
  }
  // getHeading(value:string){
  //   console.log(value)
  // }
  // getName(value:any){
  //   this.displayName = value;
  //   console.log(value)
  // }
  // getName(value:string){
  //   this.displayName = value;
  // }
  // getName(value:string){
  //   console.log(value)
  // }
  constructor() { }

  ngOnInit(): void {
  }

}

template-reference.component.html File Code

<!-- <input type="text" #nameBox placeholder="Enter Your Name" name="myName">
<input type="button" (click)="getName(nameBox.value)" value="Click">
<h2>{{ displayName }}</h2> -->

<!-- <input type="text" (keyup)="getName(nameBox.value)" #nameBox placeholder="Enter Your Name" name="myName">
<h2>{{ displayName }}</h2> -->

<!-- <input type="text" #nameBox placeholder="Enter Your Name" name="myName">
<input type="button" (click)="getName(nameBox.placeholder)" value="Click">
<h2>{{ displayName }}</h2> -->
<!-- <input type="text" #nameBox placeholder="Enter Your Name" name="myName">
<input type="button" (click)="getName(nameBox.name)" value="Click">
<h2>{{ displayName }}</h2> -->
<!-- <input type="text" #nameBox placeholder="Enter Your Name" name="myName">
<input type="button" (click)="getName(nameBox.type)" value="Click">
<h2>{{ displayName }}</h2> -->

<!-- <input type="text" #nameBox placeholder="Enter Your Name" name="myName">
<input type="button" (click)="getName(nameBox)" value="Click">
<h2>{{ displayName }}</h2> -->

<!-- <h2 #heading>Mohammad Adil</h2>
<button (click)="getHeading(heading.innerHTML)">Click</button> -->

<!-- <input type="text" #fnameBox placeholder="Enter First Name" name="firstName">
<br><br>
<input type="text" #lnameBox placeholder="Enter Last Name" name="lastName">
<br><br>
<input type="button" (click)="getName(fnameBox.value, lnameBox.value)" value="Click">
<h2>{{ displayName }}</h2> -->

<input type="text" (keyup)="getName(fnameBox.value, lnameBox.value)" #fnameBox placeholder="Enter First Name" name="firstName">
<br><br>
<input type="text" (keyup)="getName(fnameBox.value, lnameBox.value)" #lnameBox placeholder="Enter Last Name" name="lastName">
<br><br>
<h2>{{ displayName }}</h2>

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/f6lmozwz3jyvckt/14+-+Template+Reference+Variable.pptx/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/mnwhylbbe5owzz6/Angular-Projects+2.rar/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *