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?
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