Dynamic template reference variable inside ngFor (Angular 9)

Question

How to declare a dynamic template reference variable inside a ngFor element?

I want to use the popover component from ng-bootstrap, the popover code (with Html binding) is as shown:

<ng-template #popContent>Hello, <b>{{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>

How can I wrap those elements inside ngFor?

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

Hmmm... any idea?

There is no such thing as dynamic reference variables. Why do you think it needs to be dynamic? — Günter Zöchbauer, Jun 08 '17 at 16:21
because their tutorial said in order to have html binding inside a popover, then we need to create a `ng-template` and refer it with *template reference variable*, but now I want to use this popover inside a `ngFor` element — Boo Yan Jiong, Jun 08 '17 at 16:25
Just do the same. The template variable will be different for each element even when it has the same name. — Günter Zöchbauer, Jun 08 '17 at 16:28
What happens if you use the same *ref* for everything? Have you tested it? — developer033, Jun 08 '17 at 16:29
Ha, I never think of that... I will test it now... because I keep thinking on how to declare a ** *template reference variable* with "index"**... will update later after I test it out... :D — Boo Yan Jiong, Jun 08 '17 at 16:33
Yeah, it works... I tested it out... thanks for your solution — Boo Yan Jiong, Aug 13 '17 at 10:15

yurzui · Answer 1 · 2018-04-28T20:38:39.877

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

Note that if you are using an `@ViewChild`, you cannot use this solution (and then should use @AlexBoisselle's one) — Random, Aug 03 '20 at 11:53

score 39 · Answer 2 · answered Jan 24 '19 at 16:56

39

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!

answered Jan 24 '19 at 16:56

Alex Boisselle

815
9
12

Thanks, this solved a problem I had with ng-bootstrap nav-tabs that were created in a ngFor. Having the same reference, tabs were changing simultaneously. – theomeli Dec 04 '21 at 18:22

score 2 · Answer 3 · answered Jul 27 '20 at 11:28

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>

Dynamic template reference variable inside ngFor (Angular 9)

3 Answers3

Linked

Related