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.
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>