CODEWITHSUNDEEP
angularng-bootstrap
Jusef
Jusef

Reputation: 239

How to create multiple ngbPopover instances with custom templates

I am trying to use the ngbPopover component of the ng-bootstrap library to create a popover of submenu options of a top navigation menu. I was intending to use the ability to have a custom for each menu option. The menu options are generated dynamically via an *ngFor directive. I could not find a way to use a template for each element of an *ngFor. Not sure what I am missing seems to be a pretty straightforward requirement. Here is what I was trying to do:

    <li class="nav-item" *ngFor="let option of topMenuOptions; let i = index;">
        <a routerLinkActive="active" [routerLink]="[option.permalink, option.id]" class="nav-link" [ngClass]="{'nav-link-hovered': isHovered(option.name)}"
          (mouseover)="onHoverOverLink(option.name, true, i)" (mouseout)="onHoverOverLink(option.name, false, i)" [ngbPopover]="'subMenues' + i"
          placement="bottom" triggers="manual">{{option.name}}</a>
          <template [attr.id]="'subMenues' + i">
            some submenues {{i}}
          </template>
    </li>

It does not look like it is possible to generate the template references dynamically via this sort of syntax [ngbPopover]="'subMenues' + i"

This is what I am trying to achieve with the exception that each popover should have its own

enter image description here

Upvotes: 3

Views: 2893

Answers (1)

Francesco Milani
Francesco Milani

Reputation: 415

<li class="nav-item" *ngFor="let option of topMenuOptions; let i = index">
    <template #submenus>
        some submenues {{i}}
    </template>
    <!-- assuming "option.name" is a string -->
    <a href="#" popoverTitle="{{option.name}}" [ngbPopover]="submenus"
      placement="bottom" triggers="mouseenter:mouseleave">menu nr. {{i}}
    </a>
</li>

This worked for me. I'm hoping it helps.

Upvotes: 1

Related Questions