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.


Discover more from 株式会社CONFRAGE ITソリューション事業部

Subscribe now to keep reading and get access to the full archive.

Continue reading

Copied title and URL