2

I understand the what hashtag syntax <input #myinput > means, providing a name for access to the element, but I don't understand the following syntax, from an example in the angular material website:

 <mat-menu #menu="matMenu">

What does the expression after the equal sign mean? Is it some kind of aliasing? If so why not just write <mat-menu #matMenu> ?

GGizmos
  • 2,972
  • 1
  • 19
  • 48
  • Does this answer your question? [What does Angular 2 hashtags in template mean?](https://stackoverflow.com/questions/42677096/what-does-angular-2-hashtags-in-template-mean) – R. Richards Oct 20 '20 at 17:24
  • Not really, as this discussion just is on the syntax "#name", not #name='[something]'. However that question is answered in the answer below (4th bullet). – GGizmos Oct 20 '20 at 18:44

1 Answers1

3

Using # you can create a reference so you can call from other places in your component. As the documentation says:

A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component

Angular assigns each template reference variable a value based on where you declare the variable:

  • If you declare the variable on a component, the variable refers to the component instance.
  • If you declare the variable on a standard HTML tag, the variable refers to the element.
  • If you declare the variable on an element, the variable refers to a TemplateRef instance, which represents the template.
  • If the variable specifies a name on the right-hand side, such as #var="ngModel", the variable refers to the directive or component on the element with a matching exportAs name.

You can read more here: template-reference-variables | angular.io

StPaulis
  • 2,652
  • 1
  • 11
  • 23
  • What does this mean? If you declare the variable on a component... How do we declare a variable on the component? – JWP Oct 20 '20 at 17:47
  • With the hash. (ex: `
    `. You can now use the `adiv` because you have created a reference. You can access it from your `.ts` file as well as an `ElementRef` cause is a standar HTML tag.     – StPaulis Oct 20 '20 at 18:11
  • It appears that what appears after the equals sign is not a variable name but a type. So when you go #menu="matMenu" or #var="ngModel" you are identifying that the object referred to my 'menu' or 'var' is a directive of type of matMenu or ngModel respectively. Or at least that what it seems like. – GGizmos Oct 20 '20 at 18:39
  • How does that differ from "If you declare the variable on a standard HTML tag, the variable refers to the element" both are on an htmlelement one refers to the component and the other to the element? Doesn't make sense. I still don't understand the "Component" part. – JWP Oct 20 '20 at 20:31
  • I do not understand what you don't understand. Yes Template-Reference-Variable works the same, it creates a reference wherever you put it. In the Component you can: ``. And now you can refer to this specific instance from other places. Just like an ElementReference but now we have MyComponent Reference. – StPaulis Oct 21 '20 at 07:14