Angular template reference variable

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.

Template reference variables are usually used to refer to a DOM element in a template, but can also refer to Angular components, directives, and Web Component (custom element tags).

 

store.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {

  name = 'SUV';

  constructor() { }

  by OnInit () {
  }

}

store.component.html

<!-- Reference DOM element -->

<span #title>4S店</span>
<button (click)="print(title.innerHTML);">单击</button>

<input type="tel" #tel value="021-12345678"/>
<button (click)="print(tel.value);">单击</button>

<!-- Refer to Angular component -->

<app-car #car></app-car>
<button (click)="print(car.name);">单击</button>

car.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-car',
  templateUrl: './car.component.html',
  styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit {

  name = 'SUV';

  constructor() { }

  by OnInit () {
  }

}