Variables with # (sharp) in Angular

Variables with # (sharp) in Angular

Do you ever wonder what the heck is #i or any other variable that suddenly appears in a component?

This is not a TypeScript variable, but a variable meaning a local variable in Angular, with # appended to the beginning of the variable name.

For example, you can use this mechanism to store the input value of a text box in a local variable. It can then be passed directly to the component.

app.component.ts

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

@Component({
  selector: 'app-root',
  template:
  `
  <input type="text" #val><br>
  <button (click)="onClick(val.value)">Button</button><br>
  <h6>{{msg}}</h6>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  onClick(a:string){
    this.msg = a;
  }
}

The above is done by entering a value in a text box and clicking a button.

This is achieved with a local variable.

I thought it was a TypeScript feature, but looking at the documentation, it was an Angular feature.

高橋