How to use Angular’s template reference variables

Angular has a mechanism called data binding, and a similar feature is called template reference variables.

You can specify an element in a template as #variable name to use that variable.

The way to write it is as follows.

<element #variable_name></element>

The following is an example of displaying the value entered in a text box below the text box.

app.component.ts

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

@Component({
  selector: 'app-root',
  template:
  `
  <input type='text' #ttt (change)='onChange(ttt.value)'><br>
  <p>{{a}}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a:string;
  onChange(str: string){
    this.a = str;
  }
}

It works as follows

It can also be completed only in the view by setting (change)=’0’` as follows.

app.component.ts

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

@Component({
  selector: 'app-root',
  template:
  `
  <input type='text' #ttt (change)='0'><br>
  <p>{{ttt.value}}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Event binding is used to execute asynchronous processing and update the view.

高橋