What is # in Angular? A Technical Guide

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 #username>
 <p>Entered: {{ username.value }}</p>

1. Angular Components

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

1. Directives

<div #ngModelRef="ngModel" [(ngModel)]="name"></div>
 <p>Valid: {{ ngModelRef.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/20): The `#` syntax is the same.
• AngularJS (1.x): The `#` symbol is not used this way. AngularJS 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.

Also Read:

Angular Component Libraries