Reference #

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.

Source
<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) {
    alert(phone);
  }
}
Result

You can use the ref- prefix alternative to #.

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

exportAs

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.

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