Home Angular7 How to Implement Select2 in Angular 7?

How to Implement Select2 in Angular 7?

by therichpost
Published: Last Updated on 40 comments

Here is the updated post link for select2 in Angular 9:

Hello guys, welcome to therichpost.com. In this post, I will tell you, How to Implement Select2 in Angular 7?

I was sitting and thinking and suddenly an Idea came to my mind and I wrote new post related select2 implementation in Angular 7.

Select2 is very well customize select box with searching, sorting, autocomplete and many more features.

Here is the working picture:

How to Implement Select2 in Angular 7?


Here are the working coding steps:


1. Very first, you need to run common below commands to add Angular 7 project on your machine:
$ npm install -g @angular/cli 

$ ng new angularselect2 //Install Angular Project

$ cd angularselect2 // Go to project folder

$ ng serve //Run Project

http://localhost:4200/ //Run On local server


2. Now you need to run below commands to add select2 and jquery into your Angular application:
npm install select2

npm install jquery --save


3. Now add below code into your angular.json file:
"styles": [
              "node_modules/select2/dist/js/select2.min.js" // I added here because this is not working in script block


4. Now add below code into your app.component.ts file:
import { Component, OnInit } from '@angular/core';
import * as jquery from 'jquery';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angularselect2';

  	 jquery('.js-example-basic-single').select2(); //initialize select2 to particular input


5. Finally add below code into your app.component.html file:
<div style="text-align:center">
    Welcome to {{ title }}!
  <select class="js-example-basic-single" name="state" style="width: 150px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>

This is it. If you have any query related to this post then do comment below or you can ask questions.

Thank you,

Jatt Blood,


Notes: I have this blog for helping others and everyone can ask me queries related to Angular, Laravel, Wordpress etc. I will be very happy to help all.

Here you can check more post related to select 2:

You may also like


Mantelinga April 29, 2019 - 10:41 am

This is working fine but not expected when user select value suggestion should be closed here it’s not.

Ajay Malhotra April 30, 2019 - 3:32 pm

Okay, I will check and update on it and thank you for notice.

Julien Pitt December 18, 2019 - 7:18 am

Great and it worked for me.

saeed January 8, 2020 - 8:06 am

form validation and (change) is not working on it.

Ajay Malhotra January 8, 2020 - 4:41 pm

Can you please share that code, how are you doing?

saeed March 6, 2020 - 7:18 am

sir please look at the code


changeofCountry() is not calling

Estevan Gomez January 9, 2020 - 12:17 pm

Thanks bro, u helped me a lot

Ajay Malhotra January 9, 2020 - 5:55 pm

You are welcome

italo January 23, 2020 - 6:54 pm

Thanks man! 2 days i searched for this solution kkkkk

Ajay Malhotra January 23, 2020 - 6:57 pm


Geraldo January 29, 2020 - 7:35 pm


This code:


When a use a simple select, binds work, when I use select 2 do nothing.

Can you help me.

Ajay Malhotra January 30, 2020 - 4:17 pm

I will show you dynamic working example.

Muhammad Behroz February 19, 2020 - 2:36 pm

(change) is not working .. if it start working my problems will be solved…So kindly provide me some help.

Ajay Malhotra February 19, 2020 - 5:03 pm

Can you please explain it properly?

Muhammad Behroz February 20, 2020 - 6:52 am

when the drop down is appears it show values… but when we select any value it does not work .. i mean to say selection is not working… on selection i want my function to execute.. . i am also sharing my code..


in first line of code i am using (change)=”function()”..
kindly help as soon as you can i will be very thankful to you..

Muhammad Behroz February 20, 2020 - 6:58 am

Code is here.. in above comment something went wrong ..
kindly see this code


Ajay Malhotra February 20, 2020 - 7:07 am

I got it, you want to get and show selected value?

saeed March 6, 2020 - 7:12 am

do you solve your problem of (change)=”function()”, i am unable to get the change function.

Muhammad Behroz February 20, 2020 - 8:09 am

Yes . i want to get selected value. and on selection of value i want to execute my function that is written in typescript file

Ajay Malhotra February 25, 2020 - 9:54 am

OKay fine

Rk April 21, 2020 - 10:09 am

how to get change event in select2

Ajay Malhotra April 21, 2020 - 11:02 am

I will update it.

Jamal Haider February 25, 2020 - 9:49 am

Well done sir

Ajay Malhotra February 25, 2020 - 4:10 pm

Thank you 🙂

Dhaval June 11, 2020 - 9:31 am

Getting Error on compile time
Property ‘select2’ does not exist on type ‘JQuery’. Did you mean ‘select’?

Ajay Malhotra June 11, 2020 - 11:45 am

Did you add jquery?

Waqas July 4, 2020 - 8:06 pm

This issue is in angular 9

Jakob Hesse June 20, 2020 - 9:45 pm

plz how to get the selected value without jquery methods

Ajay Malhotra June 21, 2020 - 3:01 pm

Will update you soon.

Waqas July 4, 2020 - 8:08 pm

It’s not working in angular 9
Please help

Ajay Malhotra July 5, 2020 - 6:06 am Reply
Waqas July 5, 2020 - 11:52 am

its working fine now thanks but how i get change event value change event is not triggered simple select its working but select 2 its not working

Ajay Malhotra July 5, 2020 - 4:03 pm

I will also make example on it.

Waqas July 6, 2020 - 9:58 pm

Thanks dost I need it on urgent basis

Ajay Malhotra July 7, 2020 - 5:50 am

I will update you, thanks

Waaas July 8, 2020 - 10:17 pm

Thanks bro thank you so much please if u don’t mind share a whts up number

vicky October 10, 2022 - 7:35 am

} this is what i written in my ts file. in console it shows the the element of select class but cant apply select 2.
.select2 is not a function, this is what coming after the steps i followed, does anybody know the reason?.

therichpost October 10, 2022 - 8:41 am

See this:
#Angular14 with #select2 working demo



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.