Include default.theme.css in app.scss

~@ng-select/ng-select/themes/default.theme.css

Install ng-select using npm

ng-select

npm install --save @ng-select/ng-select

No Dependencies for this module.

Add NgSelectModule into your UIComponentsModule class. ui-components.module.ts would look like this

    
    import {NgModule} from '@angular/core';
    import { NgSelectModule } from '@ng-select/ng-select';
    import { SelectComponent } from './extra/select/select.component';

    @NgModule({
    imports: [NgSelectModule],
    declarations: [SelectComponent]
    })
    export class UIComponentsModule { }
                    

Select.component.html would look like this

    
            <ng-select [items]="cities" bindLabel="name" placeholder="Select city" [(ngModel)]="selectedCity">
                </ng-select>
                <p>
                  Selected city: {{selectedCity | json}}
                </p>
   
                            

Import NgSelectModule, NgOption in SelectComponent class. Select.component.ts would look like this

    
    @Component({ selector: 'app-select',
     template: `Select.component.html`
    });
    export class SelectComponent {
        cities = [
    {id: 1, name: 'Vilnius'},
    {id: 2, name: 'Kaunas'},
    {id: 3, name: 'Pavilnys', disabled: true},
    {id: 4, name: 'Pabradė'},
    {id: 5, name: 'Klaipėda'}
];

selectedCity: any;

     }