Angular 10Angular 9JavascriptJquery

Angular 9/10 select2 get value onchange event

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9/10 select2 get value onchange event.

Angular 10 came. if you are new in angular then please check below two important links:

Angular for Beginners

Angular 10 basics tutorials

Post Working:

In this post, I am showing select2 into my Angular 10 and get value onchange event..
angular 10 select2 get value
Angular 9/10 select2 get value onchange event

Here is code snippet and please use carefully:

1. Very first, you need to below command into your Angular 10 application:

npm install select2
npm install jquery --save

2. Now you need to add below code into your angular.json file:

"styles": [
       "node_modules/select2/dist/css/select2.min.css",
              ...
          ],
"scripts": [
       "node_modules/jquery/dist/jquery.min.js", 
       "node_modules/select2/dist/js/select2.min.js"
              ...
      ]

 

3. Now you need to add below code into your app.component.ts file:

...
declare let $: any;
...


export class AppComponent {
...
   
   ngOnInit() {

    
    $('.js-example-basic-single').select2();
    $('.js-example-basic-single').on("change", function(){
	   alert($(this).val());
    });

  }

...


}

 

4. Now you need to add below code into app.component.html file:

<select class="js-example-basic-single" name="state" style="width: 150px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

 

 

This is it and if you have any kind of query then please do comment below.

Jassa

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

4 Comments

Leave a Reply

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