Can't use scope variables inside a popover/tooltip TemplateReference

[javcode]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-scmfqv

Steps to reproduce

Create a tooltip inside an *ngFor and try to access the declared variable from inside the ng-template

What is expected?

The scope variable should be accessible and rendered inside the ng-template used by the popover/tooltip

What is actually happening?

The variable is undefined

Environment	Info
ng-zorro-antd	7.4.1
Browser	Chrome

[wenqi73]

It is not a problem of ng-zorro, angular does not support this:

<!-- Can not be rendered too -->
<div *ngFor="let item of items">
  <ng-container [ngTemplateOutlet]="popoverVarsContent"></ng-container>
</div>

<ng-template #popoverVarsContent>
  <p>Item: {{item | json}}</p>  
</ng-template>

You should create a new component and use @Input.

[hsuanxyz]

@javcode You can move ng-template to the loop body.

<div *ngFor="let item of items">
  <ng-container [ngTemplateOutlet]="popoverVarsContent"></ng-container>
  <ng-template #popoverVarsContent>
    <p>Item: {{item | json}}</p>  
  </ng-template>
</div>

[javcode]

I've ended up creating a new Component taking the 'item' as an input as I wanted to be able to re-use this code as it's used in several places.

export class ImportPopoverComponent implements OnInit {

  @Input()
  item:{}
}

Now the new component html looks like:

<a href="javascript:void(0)" nz-popover [nzContent]="popover">Add Item</a>

<ng-template #popover>
  <div>{{item}}</div>
</ng-template>

and I call it from the parent using:

<app-import-popover [item]="item"></app-import-popover>

Thanks wenqi73 for the work-around

[wenqi73]

@javcode , @hsuanxyz 's work-around is more convenient.

[Areeb-Raza]

@javcode You can move ng-template to the loop body.

<div *ngFor="let item of items">
  <ng-container [ngTemplateOutlet]="popoverVarsContent"></ng-container>
  <ng-template #popoverVarsContent>
    <p>Item: {{item | json}}</p>  
  </ng-template>
</div>

Works like a charm.