How to Pass Context Properly in ngbPopover?

I can't access context in html although feature is already there in official document.

HTML

<button
type="button"
class="btn btn-primary"
triggers="manual"
#popover="ngbPopover"
[ngbPopover]="popoverContent"
[popoverTitle]="'My Popover'"
(click)="openPopoverWithData()"
>
Open Popover
</button>

<!-- Popover Content Template -->
<ng-template #popoverContent let-data="context">
<div *ngIf="data; else noData">
<strong>Received context:</strong> {{ data | json }}
</div>
<ng-template #noData>
<div>⚠️ No context available</div>
</ng-template>
</ng-template>


TS

@ViewChild('popover', { static: false }) popover: NgbPopover;

openPopoverWithData() {
const myContext = {
id: 1,
name: 'Test Template'
};

// Defensive: ensure popover closes before opening
if (this.popover.isOpen()) {
this.popover.close();
}

// Open popover with context
setTimeout(() => {
this.popover.open(myContext); // context passed here
});
}


Even I tried with setTImeout but still not working.

I am using "@ng-bootstrap/ng-bootstrap": "^15.1.2" and refer https://ng-bootstrap.github.io/releases/15.x/#/components/popover/api

Continue reading...