Home Angular7 How to Implement Select2 in Angular 7?

How to Implement Select2 in Angular 7?

by therichpost
Published: Last Updated on 40 comments
angular7

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": [
              "src/styles.css",
              "node_modules/select2/dist/css/select2.min.css", 
              "node_modules/select2/dist/js/select2.min.js" // I added here because this is not working in script block
          ],
"scripts":[
              "node_modules/jquery/dist/jquery.js"
          ]
...

 

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

  ngOnInit()
  {
  	 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">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <select class="js-example-basic-single" name="state" style="width: 150px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
</div>

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,

TheRichPost.

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

40 comments

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.

Reply
Ajay Malhotra April 30, 2019 - 3:32 pm

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

Reply
Julien Pitt December 18, 2019 - 7:18 am

Great and it worked for me.

Reply
saeed January 8, 2020 - 8:06 am

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

Reply
Ajay Malhotra January 8, 2020 - 4:41 pm

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

Reply
saeed March 6, 2020 - 7:18 am

sir please look at the code

{{option.name}}

changeofCountry() is not calling

Reply
Estevan Gomez January 9, 2020 - 12:17 pm

Thanks bro, u helped me a lot

Reply
Ajay Malhotra January 9, 2020 - 5:55 pm

You are welcome

Reply
italo January 23, 2020 - 6:54 pm

Thanks man! 2 days i searched for this solution kkkkk

Reply
Ajay Malhotra January 23, 2020 - 6:57 pm

Welcome..

Reply
Geraldo January 29, 2020 - 7:35 pm

Hi,

This code:

{{item.descricao}}

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

Can you help me.

Reply
Ajay Malhotra January 30, 2020 - 4:17 pm

I will show you dynamic working example.

Reply
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.

Reply
Ajay Malhotra February 19, 2020 - 5:03 pm

Can you please explain it properly?

Reply
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..

{{customer.Name}}

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

Reply
Muhammad Behroz February 20, 2020 - 6:58 am

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

{{customer.Name}}

Reply
Ajay Malhotra February 20, 2020 - 7:07 am

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

Reply
saeed March 6, 2020 - 7:12 am

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

Reply
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

Reply
Ajay Malhotra February 25, 2020 - 9:54 am

OKay fine

Reply
Rk April 21, 2020 - 10:09 am

how to get change event in select2

Reply
Ajay Malhotra April 21, 2020 - 11:02 am

I will update it.

Reply
Jamal Haider February 25, 2020 - 9:49 am

Well done sir

Reply
Ajay Malhotra February 25, 2020 - 4:10 pm

Thank you 🙂

Reply
Dhaval June 11, 2020 - 9:31 am

Getting Error on compile time
jquery(‘.js-example-basic-single’).select2();
Property ‘select2’ does not exist on type ‘JQuery’. Did you mean ‘select’?

Reply
Ajay Malhotra June 11, 2020 - 11:45 am

Did you add jquery?

Reply
Waqas July 4, 2020 - 8:06 pm

This issue is in angular 9

Reply
Jakob Hesse June 20, 2020 - 9:45 pm

plz how to get the selected value without jquery methods

Reply
Ajay Malhotra June 21, 2020 - 3:01 pm

Will update you soon.

Reply
Waqas July 4, 2020 - 8:08 pm

It’s not working in angular 9
Please help

Reply
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

Reply
Ajay Malhotra July 5, 2020 - 4:03 pm

I will also make example on it.

Reply
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

ngAfterViewInit()
{
console.log(this.tagLesson.nativeElement);
this.tagLesson.nativeElement.select2();
} 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?.

Reply
therichpost October 10, 2022 - 8:41 am

See this:
#Angular14 with #select2 working demo

https://therichpost.com/how-to-use-select2-in-angular-14/

Reply

Leave a Comment

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