How to use select2 in Angular 14?

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