`Template Reference Variable`

Names a DOM element, component, or directive for use within the template.

Since Angular 2+ Spec ↗

Syntax

#refName  or  #refName="exportAsName"

Parameters

Name	Type	Required	Description
`refName`	`identifier`	No	The local variable name made available in the template.

Returns

template variable — Reference to the element/component/directive.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <input #box (keyup)="0" />
    <p>{{ box.value }}</p>
    <button (click)="box.focus()">Focus</button>
  `,
})
export class XComponent {}

Notes

A `#ref` on a plain element refers to the native DOM element; on a component it refers to the component instance. Use `#ref="exportName"` to capture a directive that defines `exportAs`. The reference is scoped to the template and resolvable in @ViewChild/viewChild() by name.