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:
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:
Comments
40 responses to “How to Implement Select2 in Angular 7?”
This is working fine but not expected when user select value suggestion should be closed here it’s not.
Okay, I will check and update on it and thank you for notice.
Great and it worked for me.
form validation and (change) is not working on it.
Can you please share that code, how are you doing?
Thanks bro, u helped me a lot
You are welcome
Thanks man! 2 days i searched for this solution kkkkk
Welcome..
Hi,
This code:
{{item.descricao}}
When a use a simple select, binds work, when I use select 2 do nothing.
Can you help me.
I will show you dynamic working example.
(change) is not working .. if it start working my problems will be solved…So kindly provide me some help.
Can you please explain it properly?
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..
Code is here.. in above comment something went wrong ..
kindly see this code
{{customer.Name}}
I got it, you want to get and show selected value?
Yes . i want to get selected value. and on selection of value i want to execute my function that is written in typescript file
Well done sir
OKay fine
Thank you 🙂
do you solve your problem of (change)=”function()”, i am unable to get the change function.
sir please look at the code
{{option.name}}
changeofCountry() is not calling
how to get change event in select2
I will update it.
Getting Error on compile time
jquery(‘.js-example-basic-single’).select2();
Property ‘select2’ does not exist on type ‘JQuery’. Did you mean ‘select’?
Did you add jquery?
plz how to get the selected value without jquery methods
Will update you soon.
This issue is in angular 9
It’s not working in angular 9
Please help
Here you can check working in Angular 9:
https://therichpost.com/angular-9-select2-with-laravel-7-2-backend-data/
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
I will also make example on it.
Thanks dost I need it on urgent basis
I will update you, thanks
Please check this:
https://therichpost.com/angular-9-10-select2-get-value-onchange-event/
Please check updated post:
https://therichpost.com/angular-9-10-select2-get-value-onchange-event/
Thanks bro thank you so much please if u don’t mind share a whts up number
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?.
See this:
#Angular14 with #select2 working demo
https://therichpost.com/how-to-use-select2-in-angular-14/