angulartwitter-bootstrap-4ng-bootstrap

How to pass data to an ng-bootstrap popover


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?


Solution

  • 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