Archives: Q&A

In Angular, the ‘#’ symbol inside a template is used to create a template reference variable. It’s a way to give a name to an element, component, or directive in your HTML, so that you can easily refer to it within that same template.

Basic Example

<input #myInput type="text">
<button (click)="alertValue(myInput.value)">Show Value</button>

Here:

• ‘#myInput’ is a reference variable for the “<input type=”text”>” element.
• Inside the same template, you can access properties or call methods on that element (like ‘.value’).

How It Works (In Simple Words)

Think of ‘#’ like putting a sticky note with a name on something on your page. If you label an input box ‘#myInput’, Angular will remember “that’s the input box,” so you can quickly point to it without searching for it in the DOM.

Where You Can Use It

1. HTML Elements

<input #usernameInp>
<p>You entered: {{ username.value }}</p>

2. Angular Components

<app-child #childComp></app-child>
<button (click)="childComp.doSomething()">Call Child Method</button>

3. Directives

<div #ngModuInp="ngModel" [(ngModel)]="name"></div>
<p>Valid: {{ ngModuInp.valid }}</p>

Accessing Template Reference Variables from TypeScript

By default, template reference variables (declared with #) are accessible only within the template HTML. But sometimes, you want to interact with those elements, components, or templates directly in your TypeScript code. Angular provides the @ViewChild decorator for this.

Sample Code

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

@Component({
  selector: 'app-my-component',
  template: `
    <input #myInput type="text">
    <button (click)="focusInput()">Focus Input</button>
  `
})
export class MyComponent {
  @ViewChild('myInput') myInputRef!: ElementRef<HTMLInputElement>;

  focusInput() {
    this.myInputRef.nativeElement.focus();
  }
}

Here:

• @ViewChild(‘myInput’) tells Angular to look for the template reference variable named myInput.
• The variable myInputRef will hold a reference to the element or component.
• You often use ElementRef for native HTML elements, or the component/directive class if referencing those.
• The reference is available after the view initialization lifecycle hook, so use ngAfterViewInit or later.

Version & Syntax Notes

• Angular 2+ (all versions up to Angular 17/18/19): The ‘#’ syntax is the same.
• Angular JS (1.x): The ‘#’ symbol is not used this way. Angular JS uses ‘ng-model’, ‘ng-click’, etc., and template reference variables don’t exist.
• Shorthand Alternative: You can also use ‘ref-‘ instead of ‘#’:
  <input ref-myInput>
  This is less common but works the same.

Things to Remember

1. Scope: Template reference variables only work inside the same template (HTML file). You can’t directly use them in a different component’s template.
2. Not a CSS ID: ‘#’ here has nothing to do with HTML/CSS IDs (like ‘id=”…”‘).
3. No Special Binding Needed: Angular automatically gives you a reference to the DOM element, component, or directive instance.
4. Used for Read-Only Access: You can interact with properties/methods, but it doesn’t “store” data, it just points to the element.

Summary In One Line

In Angular, ‘#’ is used to name something in your template so you can quickly refer to it like a shortcut to access an element, component, or directive without querying the DOM.

Conclusion

Using template reference variables with ‘#’ in Angular is a powerful and efficient way to interact with DOM elements, components, and directives directly from your templates or TypeScript code. By mastering this simple yet essential feature, you can write cleaner, more maintainable code without relying on complex DOM queries.