Categories

Sunday, October 13, 2024
#919814419350 therichposts@gmail.com
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.

therichpost
the authortherichpost
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 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

10 Comments

Leave a Reply

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