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.


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

  selector: 'app-root',
  <input type="text" #val><br>
  <button (click)="onClick(val.value)">Button</button><br>
  styleUrls: ['./app.component.css']
export class AppComponent {
    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.

Angular の#(シャープ)がつく変数

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