How to create and pass unique template reference variable in Angular?

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>