After you installed Angular you need to install Select2 NPM from terminal.
npm i ng-select2-component --save
after Select2 Component installed you need type and hit enter
ng serve
Now we need to add below code into your src/app/app.module.ts file:
import { Select2Module } from 'ng-select2-component';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
Select2Module
],
Now we need to add below code into your src/app/app.component.ts file:
import { Component } from '@angular/core';
import { Select2Option, Select2UpdateEvent } from 'ng-select2-component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angularselect2';
overlay = false;
data1:any= [
{
label: 'Alaskan/Hawaiian Time Zone',
options: [
{ value: 'AK', label: 'Alaska' },
{ value: 'HI', label: 'Hawaii', disabled: true },
],
},
{
label: 'Pacific Time Zone',
options: [
{ value: 'CA', label: 'California' },
{ value: 'NV', label: 'Nevada' },
{ value: 'OR', label: 'Oregon' },
{ value: 'WA', label: 'Washington' },
],
},
{
label: 'Mountain Time Zone',
options: [
{ value: 'AZ', label: 'Arizona' },
{ value: 'CO', label: 'Colorado' },
{ value: 'ID', label: 'Idaho' },
],
},
{
label: 'Central Time Zone',
options: [
{ value: 'AL', label: 'Alabama' },
{ value: 'AR', label: 'Arkansas' },
{ value: 'IL', label: 'Illinois' },
],
},
{
label: 'Eastern Time Zone',
options: [
{ value: 'CT', label: 'Connecticut' },
{ value: 'DE', label: 'Delaware' },
{ value: 'FL', label: 'Florida' },
{ value: 'GA', label: 'Georgia' },
],
},
];
change(key: string, event: Event) {
console.log(key, event);
}
search(text: string) {
this.data1 = text
? (JSON.parse(JSON.stringify(this.data1)) as Select2Option[]).filter(
option => option.label.toLowerCase().indexOf(text.toLowerCase()) > -1,
)
: JSON.parse(JSON.stringify(this.data1));
}
update(key: string, event: Select2UpdateEvent<any>) {
console.log(event.value);
}
value1 = 'CA';
}
Now we need to add below code into app.component.html file to get final output on browser:
<select2
[overlay]="overlay"
[data]="data1"
[value]="value1"
(update)="update('value1', $event)"
(change)="change('change1', $event)"
(search)="search('search1')"
resettable
id="select2-1"
>
</select2>
If this code are still unclear please checkout my youtube video,
Please dont forget to subscribe like share and give thumbsup Than you