Popover

The popover input is deprecated and has no effect: the dropdown panel always renders in an Angular CDK overlay, and the CDK uses the browser's native Popover API top layer automatically wherever it is supported. The panel can never be clipped by overflow: hidden containers and never ends up behind another element's stacking context — including native dialogs and Bootstrap modals.

Top layer rendering

import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgSelectComponent } from '@ng-select/ng-select';
import { DataService, Person } from '../data.service';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
    selector: 'ng-popover-example',
    templateUrl: './popover-example.component.html',
    styleUrls: ['./popover-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent, FormsModule],
})
export class PopoverExampleComponent {
    private dataService = inject(DataService);

    people = toSignal<Person[]>(this.dataService.getPeople());
    selected1: Person;
    selected2: Person;
}

<div class="alert alert-warning">
    <strong><code>popover</code> is deprecated and has no effect.</strong> The dropdown panel now always renders in an Angular CDK overlay, and the CDK uses the
    browser's native <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" target="_blank">Popover API top layer</a> automatically wherever it
    is supported. Remove the input from your templates.
</div>

<p>
    Because the panel renders in the top layer, it can never be clipped by <code>overflow: hidden</code> containers and never ends up behind another element's
    stacking context — including native dialogs and Bootstrap modals:
</p>

<h6>Inside a container with <code>overflow: hidden</code></h6>
<div class="clipped-box">
    <ng-select [items]="people()" bindLabel="name" placeholder="Select a person" [(ngModel)]="selected1"> </ng-select>
</div>

<br />

<h6>Another clipped container — same behavior, no inputs required</h6>
<div class="clipped-box">
    <ng-select [items]="people()" bindLabel="name" placeholder="Select a person" [(ngModel)]="selected2"> </ng-select>
</div>

<br />

<div class="alert alert-info">
    In browsers without the <a href="https://caniuse.com/mdn-api_htmlelement_showpopover" target="_blank">Popover API</a>, the panel falls back to the CDK
    overlay container (<code>z-index: 1000</code>). If something on your page still paints above it, raise the container in your global styles:
    <code>.cdk-overlay-container &#123; z-index: 1056; &#125;</code>
</div>

.clipped-box {
    padding: 10px;
    height: 80px;
    border: 1px solid #999;
    overflow: hidden;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;

    ul {
        padding-left: 1.2rem;
    }

    a {
        color: #0c5460;
    }
}

API

Inputs used by the examples on this page:

Input	Type	Default	Description
[popover]	`boolean`	`false`	Deprecated — has no effect. The CDK overlay renders in the native Popover API top layer automatically in supporting browsers.
[items]	`Array<any>`	`[]`	Items array
bindLabel	`string`	`label`	Object property to use for label. Default `label`
placeholder	`string`	`-`	Placeholder text.

See the NgSelectComponent API reference for the complete list of inputs and outputs.