1

I found this similar question, but it doesn't explain what's going on with assignments to template reference vaiables...

I'm making a toolbar with dropdown menus using @angular/cdk's OverlayModule.

In order to have multiple dropdown menus, I have to assign the cdkOverlayOrigin directive to it's template reference variable.

<span #mytrv1="cdkOverlayOrigin">...<span> 
<span #mytrv2="cdkOverlayOrigin">...<span>

so that I can access them individually with a @ViewChild of type CdkOverlayOrigin

@ViewChild('mytrv1') mytrv1: CdkOverlayOrigin;
@ViewChild('mytrv2') mytrv2: CdkOverlayOrigin;

It seems odd to me to assign a directive to a variable like this #mytrv1="cdkOverlayOrigin". Can anyone explain this pattern?

Nate May
  • 3,814
  • 7
  • 33
  • 86
  • 1
    `#foo` creates a temple reference to the host element. `#foo="bar"` creates a template reference to the directive `bar`. – Ingo Bürk May 13 '18 at 15:42
  • 1
    https://stackoverflow.com/questions/45250259/what-is-auto-attribute-here-and-why-it-is-required – yurzui May 13 '18 at 15:50

0 Answers0