Angular 6/7/8 Ng-Select Set Default Value

The ng-select in Angular is also preferred as there is no need for any other dependency like Bootstrap or Angular Material.
Let’s get to know how quickly use it!
For making this tutorial simple we will first create a new Angular project in latest version 8.

Create A New Angular Project

Using Ng CLI tool we will create a new Angular project by running below command in terminal:

$ ng new ng-select-demo

Install & Configure Ng-Select

After creating an Angular project next we will install ng-select page.
Step 1) Run the following command in terminal to install ng-select:

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

Step 2) To use ng-select component, we need to import NgSelectModule & FormsModule in app.module.ts file:
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgSelectModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3) Finally, add a theme to style our awesome ng-select component.
We already have three themes available to select from. Import any of the following in the style.css file:

@import "~@ng-select/ng-select/themes/default.theme.css";

@import "~@ng-select/ng-select/themes/material.theme.css";

@import "~@ng-select/ng-select/themes/ant.design.theme.css";

Use Ng-Select Component

To create a select component add the ng-select component as shown below:

 <ng-select [items]="items"
               bindLabel="name"
               placeholder="Select item"
               appendTo="body"
               multiple="true"
               [(ngModel)]="selected">
    </ng-select>

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    {id: 1, name: 'Python'},
    {id: 2, name: 'Node Js'},
    {id: 3, name: 'Java'},
    {id: 4, name: 'PHP', disabled: true},
    {id: 5, name: 'Django'},
    {id: 6, name: 'Angular'},
    {id: 7, name: 'Vue'},
    {id: 8, name: 'ReactJs'},
  ];
  selected = [
    {id: 2, name: 'Node Js'},
    {id: 8, name: 'ReactJs'}
  ];
}

There are some required and optional properties:
items: Array or object of local or remote content to populate as select options.
bindLabel: The property of object which we want to show as a label in select box.
placeholder: Text shown to the user when nothing is selected.
appendTo: By default, the options wrapper is appended to the ng-select element but it can be added to other elements using this property.
multiple: Single or multiple options can be selected by setting true or false
searchable: Boolean; Enable or disable filter feature.

Using Ng-Select With Ng-Options

We can also use ng-option element in ng-select to customize the view of options as shown below:

 <ng-select bindLabel="name"
                placeholder="Select item"
                appendTo="body"
                multiple="true"
                [searchable]="true"
                [clearable]="true"
                [(ngModel)]="selected">
                <ng-option [value]="item.id" [disabled]="item.disabled" *ngFor="let item of items">
                    <img src="./assets/{{item.image}}" width="20px" height="20px"/>
                    {{item.name}}
                </ng-option>
    </ng-select>

In component, we will have selected variable as an array of id’s

export class AppComponent {
  items = [
    {id: 1, name: 'Python', image: 'python.jpg'},
    {id: 2, name: 'Node Js', image: 'nodejs.jpg'},
    {id: 3, name: 'Java', image: 'java.jpg'},
    {id: 4, name: 'PHP', image: 'php.jpg', disabled: true},
    {id: 5, name: 'Django', image: 'django.jpg'},
    {id: 6, name: 'Angular', image: 'angular.jpg'},
    {id: 7, name: 'Vue', image: 'vue.jpg'},
    {id: 8, name: 'ReactJs', image: 'reactjs.jpg'},
  ];
  selected = [ 2, 8 ];
}