How to pass data to an ng-bootstrap popover

Question

I'm writing an Angular app with Bootstrap, using ng-bootstrap. I have a popover encapsulated in a component like this:

HTML (popover component)

<div>
  <div>Data 1: <i>{{ v.data1 }}</i></div>
  <div>Data 2: <i>{{ v.data2 }}</i></div>
</div>

This popover is opened in another component:

HTML

<div *ngFor="let v of vector">
    <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
</div>

<ng-template #popOver>
    <popover></popover>
</ng-template>

I need to pass the v parameter of the ngFor to the popover. How can I achieve this?

Answer 1

It's a fundamental technique of angular how to pass data to component.

So you need to update your popover component:

popover.component.html

<div>
  <div>Data 1: <i>{{ data.data1 }}</i></div>
  <div>Data 2: <i>{{ data.data2 }}</i></div>
</div>

popover.component.ts

@Component({
  selector: 'popover',
  templateUrl: './popover.component.html'
})
export class PopoverComponent {
  @Input() data: any;
}

Then update your ngFor:

<div *ngFor="let v of vector">
  <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
  <ng-template #popOver>
    <popover [data]="v"></popover>
  </ng-template>
</div>

Here is an example https://stackblitz.com/edit/angular-laqjog