0

I have a scenario where i need to add kendo-popup to every element in my array, the problem is kendo-popup takes "anchor(parent)" as input to display the popup. Below is sample code.

  <span #anchor{{index}} *ngFor="let route of breadcrumbs;index as index;" class="item" (click)="executeAction(route)">
    <span >{{route.label}}</span>
    <span (click)="openPopup($event)"> <i class="fa fa-arrow-down"></i> </span>
    <kendo-popup [anchor]="anchor{{index}}" [open]="popupOpen" (closePopup)="close()" position="fixed"></kendo-popup>

As you can see, i want to create and pass template reference variable to kendo-popup as ["anchor0", "anchor1"]. But above code is not working. I have also tried few other techniques but none has helped yet. Can anyone please help? Thanks in advance.

mulla.azzi
  • 2,676
  • 4
  • 18
  • 25

1 Answers1

1

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope.

So your template reference variables are already unique because they are inside ngFor embedded view.

<span #anchor *ngFor="let route of breadcrumbs;index as index;" class="item" (click)="executeAction(route)">
    <span >{{route.label}}</span>
    <span (click)="openPopup($event)"> <i class="fa fa-arrow-down"></i> </span>
    <kendo-popup [anchor]="anchor" [open]="popupOpen" (closePopup)="close()" position="fixed"></kendo-popup>
Mustahsan
  • 3,852
  • 1
  • 18
  • 34
  • I tried even that, but didn't worked. It opens all the pop ups on click of any trigger. – mulla.azzi Aug 10 '20 at 06:09
  • 1
    this actually was working but i was not able to catch it, since i am using a common variable to open pop up i.e: popupOpen. It was triggering open and close for all the popups. Hence it tricked me to think, it wasnt working. After fixing this variable issue, it worked. Thanks. :) – mulla.azzi Aug 13 '20 at 06:09