Reference #
Reference #
This is the documentation for Angular 7.
You can switch to the latest version Angular 8.
You can switch to the latest version Angular 8.
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>