Add ngx-bootstrap's popover for each <span> in a loop

Question

I'm trying to show a popover using a template with data from a loop variable, but I'm getting these errors:

There is no directive with "exportAs" set to "bs-popover" ("template>
                      <span [popover]="popTemplate" popoverTitle="Anomalies" triggers="" [ERROR ->]#pop="bs-popover"></span>
                      <span *ngIf="vehicle.anomalies.length > 0" class="ba"): ng:///VehiclesModule/VehiclesSearchComponent.html@61:89
Can't bind to 'popover' since it isn't a known property of 'span'. ("
                        </ul>
                      </ng-template>
                      <span [ERROR ->][popover]="popTemplate" popoverTitle="Anomalies" triggers="" #pop="bs-popover"></span>
             "): ng:///VehiclesModule/VehiclesSearchComponent.html@61:28
Error: Template parse errors:
There is no directive with "exportAs" set to "bs-popover" ("template>
                      <span [popover]="popTemplate" popoverTitle="Anomalies" triggers="" [ERROR ->]#pop="bs-popover"></span>
                      <span *ngIf="vehicle.anomalies.length > 0" class="ba"): ng:///VehiclesModule/VehiclesSearchComponent.html@61:89
Can't bind to 'popover' since it isn't a known property of 'span'. ("
                        </ul>
                      </ng-template>
                      <span [ERROR ->][popover]="popTemplate" popoverTitle="Anomalies" triggers="" #pop="bs-popover"></span>
             "): ng:///VehiclesModule/VehiclesSearchComponent.html@61:28

My component HTML is like this:

<table class="table table-bordered table-striped table-sm table-hover">
                <thead>
                  <tr>
                    <th>
                      <input #chkAll type="checkbox" (click)="selectAll(chkAll.checked)" />
                    </th>
                    <th>Chassis</th>
                    <th>Última Atualização</th>
                    <th>MVS</th>
                    <th>Pátio</th>
                    <th>Localização</th>
                    <th class="actions-col-2"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let vehicle of vehicles; let idx = index">
                    <td>
                      <input type="checkbox" id="vehicle-{{vehicle.id}}" name="vehicle-select" [(ngModel)]="vehicles[idx].checked" value="{{vehicle.id}}"
                      />
                    </td>
                    <td>{{vehicle.chassis}}</td>
                    <td>{{vehicle.lastUpdate || '' | amFromUtc | amDateFormat: 'DD/MM/YYYY'}}</td>
                    <td>{{vehicle.mvsDescription}}</td>
                    <td>{{vehicle.yard.description}}</td>
                    <td>{{vehicle.location}}</td>
                    <td>

                      <ng-template #popTemplate>
                        <ul *ngFor="let anomaly of vehicle.anomalies">
                          <li>
                            <b>Componente:</b> {{anomaly.componentId}}
                            <b>Posição:</b> {{anomaly.tesisPosition}}
                            <b>Defeito:</b> {{anomaly.tesisDefect}}</li>
                        </ul>
                      </ng-template>
                      <span [popover]="popTemplate" popoverTitle="Anomalies" triggers="" #pop="bs-popover"></span>
                      <span *ngIf="vehicle.anomalies.length > 0" class="badge badge-pill badge-danger" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">{{vehicle.anomalies.length}}</span>

                  </tr>

                </tbody>
              </table>

PS: I've added the PopoverModule to the imports of AppModule.

Answer 1

Make sure that you imported the PopoverModule into a module where declared the VehiclesSearchComponent.

@NgModule({
    // ...
    imports: [PopoverModule], <----
    declarations: [VehiclesSearchComponent],
})
export class NameModule {
}