Dynamic template reference variable inside ngFor (Angular 9)

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 you can just use one variable for your template reference

<div *ngFor="let member of members">  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">      I've got markup and bindings in my popover!  </button></div>

and it should work because it has already declared inside <ng-template ngFor

Plunker Example

For more details see also:

• angular - conditional duplicate templateref in ng-content with selector

This is the best solution I've found: https://stackoverflow.com/a/40165639/3870815

In that answer they use:

@ViewChildren('popContent') components:QueryList<CustomComponent>;

To build a list of those dynamically generated components. Highly recommend you check it out!

Another way to allow this is to create a component that wraps the button and the ng-template

<div *ngFor="let member of members">    <popover-button [member]="member"></pop-over-button></div>

And have the following in the popover-button component

<ng-template #popContent>Hello, <b>{{member.name}}</b>!</ng-template>    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">    I've got markup and bindings in my popover!</button>