Reference Variable In Angular

In this article, we are going to learn the reference variable in Angular. Reference variables are used to send the data from a template HTML to the class so as to perform some operation.

The reference variables can be used to refer to the HTML DOM element and all of its properties. We can create the reference variable inside an HTML element with the help of ‘#’ symbol followed by the variable name, and use that for accessing the reference of that element. 

Prerequisites

• HTML, CSS, and JS
• Basics of TypeScript.
• Components

Let us create a sample TestApp. For this, you should have the below tools installed on your development environment.

1. Node
2. Npm (comes when you install node)
3. Angular CLI.
4. Text Editor.

For creating a new application, run the below command in any location on your system.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp' and your component ‘test’.

Note
See my previous article “Getting started with Angular CLI” if you want the installation and introduction from the basics, and start with the execution of a sample application.

Let us create a simple reference variable and access that by passing to the component class. Open test.component.html and add the below code.

<h2>Reference variable!</h2>
<input #name type="text">
<button (click)="print(name.value)">Print</button>

Open test.component.ts and add the below code.

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  print(obj){
    console.log(obj);
  }
  constructor() { }
  ngOnInit() {
  }
}

Run the application.

 

We have passed the value ‘name.value’ so the element value is printed. Open test.component.html and add the below content.

<h2>Reference variable!</h2>
   <input #name type="text">
<button (click)="print(name)">Print</button>

Now, we have passed the reference variable of that input element. Run the application.

 

This time, we have passed a reference variable, so when we click on the Print button, we get the element printed in the console.

Let us create a simple name textbox and button ‘toUpper’. When a user clicks on that button, the textbox value will appear in upper case.

Open test.component.html and add the below content.

<h2>Reference variable!</h2>
<input #name type="text">
<button (click)="toUpper(name)"> Convert to Upper</button>

Open test.component.ts and add the below code.

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  toUpper(obj){
    console.log(obj.value);
    obj.value= obj.value.toUpperCase();
  }
  constructor() { }
  ngOnInit() {
  }
}

Run the application.

 

Click on the ‘button’.

 

You can see that the value we sent was in lower case and we have accessed the reference element and updated that with an upper case value. In this way, we can perform several actions based on the HTML element. So, we just need to add a template reference variable and make it accessible in the component class.

We should not confuse the reference variable with two way binding. We use ngModel for two way binding because it comes with property as well as event binding to the element.

<h2>Two way binding!</h2>
   <input [(ngModel)]="name" type="text">
{{name}}

So, any update to the textbox will also reflect to the name variable used inside {{name}}. For using ngModel, we have to use ‘FormsModule’ and import this component in app.module.ts.