Angular 7 References/ Templates

Reference #

This is the documentation for Angular 7.
You can switch to the latest version Angular 10.

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

Use the hash symbol (#) to declare a reference variable. You can refer to a template reference variable anywhere in the template.

<input #phone placeholder="phone number">

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
export class AppComponent {
  callPhone(phone: string) {

You can use the ref- prefix alternative to #.

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>


In most cases, Angular sets the reference variable's value to the element on which it was declared. But a directive can change that behavior and set the value to something else, such as itself.

 selector: '[tooltip]',
 exportAs: 'tooltip'
<a tooltip="I'm a tooltip!!" #tooltip="tooltip">I'm a link</a>
<button (click)="tooltip.toggleTooltip()">Toggle tooltip</button>
Links & Tutorials