Fixed placeholder

Keep the placeholder visible even while items are selected.

Fixed placeholder

TypeScript
HTML

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgOptionComponent, NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-fixed-placeholder-example',
    templateUrl: './fixed-placeholder-example.component.html',
    styleUrls: ['./fixed-placeholder-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [FormsModule, NgSelectComponent, NgOptionComponent],
})
export class FixedPlaceholderExampleComponent {
    isPlaceholderFixed: boolean = false;
}

<p>In this example we show fixed placeholder when a value is selected. Use material theme to see it in action.</p>

<div class="form-check">
    <input [(ngModel)]="isPlaceholderFixed" class="form-check-input" id="is-fixed" type="checkbox" value="" />
    <label class="form-check-label" for="is-fixed"> Set Placeholder Fixed / Unfixed </label>
</div>

<div class="mt-3">
    <ng-select [fixedPlaceholder]="isPlaceholderFixed" placeholder="Select City">
        <ng-option [value]="'bari'">Bari</ng-option>
        <ng-option [value]="'paris'">Paris</ng-option>
    </ng-select>
</div>

API

Inputs used by the examples on this page:

Input	Type	Default	Description
[fixedPlaceholder]	`boolean`	`true`	Keep the placeholder rendered when an item is selected. Visibility is theme-dependent: the default and Ant Design themes hide it once a value is set, the Material theme floats it as a label
placeholder	`string`	`-`	Placeholder text.

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