Template Reference Variables in Angular

Template reference variables in Angular allow you to access DOM elements, components, or directives directly within your template. They provide a way to interact with elements without needing to go through the component class.

A template reference variable is a named reference to a DOM element, component, or directive within a template. It's created using the # symbol followed by a variable name.

Why Use Template Reference Variables?

• Direct DOM Access: Allows you to access and manipulate DOM elements directly.
• Component Interaction: Enables you to call methods and access properties of components within the template.
• Directive Interaction: Facilitates interaction with directives applied to elements.

Creating Template Reference Variables

To create a template reference variable, use the # symbol followed by a variable name.

Example 1: Accessing a DOM Element

In this example, we'll access an input element and display its value.

    <input type="text" #myInput>
    <p>Input Value: {{ myInput.value }}</p>
    

Explanation:

• #myInput: Creates a template reference variable named myInput.
• {{ myInput.value }}: Accesses the value property of the input element.

Example 2: Calling a Method of a Component

In this example, we'll access a component instance and call its method.

Component (my-component.ts)

    import { Component } from '@angular/core';
    @Component({
      selector: 'app-my-component',
      template: '<p>My Component</p>'
    })
    export class MyComponent {
      showMessage(): void {
        alert('Hello from MyComponent!');
      }
    }
    

Template (app.component.html)

    <app-my-component #myComponent></app-my-component>
    <button (click)="myComponent.showMessage()">Show Message</button>
    

Explanation:

• #myComponent: Creates a template reference variable named myComponent.
• (click)="myComponent.showMessage()": Calls the showMessage() method of the MyComponent instance.

Example 3: Accessing a Directive

In this example, we'll access a directive and use its properties.

Directive (highlight.directive.ts)

    import { Directive, ElementRef, HostListener } from '@angular/core';

                @Directive({
                    selector: '[appHighlight]'
                        })
    export class HighlightDirective {
      constructor(private el: ElementRef) {}

                @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
      }

                @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
      }

      private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
      }
    }
    

Template (app.component.html)

    <p appHighlight #highlightRef>Highlight me!</p>
    <button (click)="highlightRef.highlight('lightblue')">Change Color</button>
    

Explanation:

• #highlightRef: Creates a template reference variable named highlightRef.
• (click)="highlightRef.highlight('lightblue')": Calls the highlight() method of the HighlightDirective instance.

Key Points

• Template reference variables are created using the # symbol.
• They allow direct access to DOM elements, components, and directives within the template.
• They are useful for interacting with elements without going through the component class.

If you have any questions, feel free to ask. Thank you for reading!