HTML and bindings in popovers (Angular)

Issue

I want my popover to contain HTML, so I have tried to do it in this way:

<ng-template #popContent>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button>

But I get this error: Can't bind to 'ngbPopover' since it isn't a known property of 'button'.

I think it should work as it is from ng-bootstrap documentation: https://ng-bootstrap.github.io/#/components/popover/examples. Can anyone help?

Solution

Looks like you have malformed HTML in the first ng-template. You're missing an opening <b>.

I put this in stackblitz and it ran fine:

<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button> 

Update:

I've installed a completely new Angular project with ng new

I've added ng-bootstrap with ng add @ng-bootstrap/ng-bootstrap - this installed packages ng-bootstrap v9.1.3 and bootstrap v4.5.

I've replaced the boiler plate code in app.component.html which now looks like:

<router-outlet></router-outlet>

<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
  My button
</button>

This is my app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So it doesn't look like anything to do with the code (once the invalid HTML is fixed).

Only the app.component.html and app.module.ts have been updated, can you share your versions of these?

Also, what versions of Angular etc are you running. Can you share package.json?

Thanks

Answered By - David Brunning