4

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
  • 3,443
  • 4
  • 27
  • 72
  • 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

2 Answers2

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,844
  • 1
  • 14
  • 24
  • 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
1

Although the accepted answer is correct and links to a document with the answer, I thought it was worth unpacking the explanation a bit more.

tl;dr – this syntax #var="directiveExportAsName" is useful for targeting a specific directive on an element if there are multiple directives applied to the element.

Long answer

Specifically, it is unpacked in the "Variable specifying a name" section.

The code example being:

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
 <!-- removed for brevity -->
</form>

<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

Their explanation (emphasis mine):

The NgForm directive demonstrates getting a reference to a different value by referencing a directive's exportAs name... Without the ngForm attribute value, the reference value of itemForm would be the HTMLFormElement, <form>. If an element is an Angular Component, a reference with no attribute value will automatically reference the component instance. Otherwise, a reference with no value will reference the DOM element, even if the element has one or more directives applied to it.

For this particular case <mat-menu #menu="matMenu">, although the official examples use it, I don't think it is necessary. According to the doc, "If an element is an Angular Component, a reference with no attribute value will automatically reference the component instance," and since the selector mat-menu and exported as name matMenu refer to the same component directive, it is therefore redundant.

ahong
  • 1,041
  • 2
  • 10
  • 22