Wednesday, June 12, 2024

How to Implement Select2 in Angular 7?

Implement Select2 in Angular 7

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

Hello guys, welcome to 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:

the authortherichpost
Hello to all. Welcome to 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.


Leave a Reply

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