How To Add Country Flags Icon In Angular Using Bootstrap

Here, we will learn about how to add countries’ flags in Angular. We have some time this kind of requirements where we need to add the countries flag, so we use the images for it. But we can use the flag-icon-CSS for it, and it will make our task easy.

Roadmap for developing the application:

• Installing the Node Package.
• Adding the CSS to the angular.json file
• Use the different classes for the flag.

Let’s begin with it.

Installing the Node Package

You can use the following command to install the package. You can take a look at the official documentation for more information from here.

The command for installing the package:

npm install flag-icon-css

Adding the CSS to the angular.json file

Now, the package is installed and we have to provide the reference in the angular.json file. Open the angular.json file and add the reference in the CSS section.

"node_modules/flag-icon-css/css/flag-icon.min.css"

Use the different classes for the flag.

Now, open the app.component.html file and add the following code to it.

<div class="container"> 
        <div class="row"> 
             <div class="col-md-5"> 
                      <ul> 
                             <li> India <span class="flag-icon flag-icon-in flag-icon-squared"></span> </li> 
                             <li> United Kingdom <span class="flag-icon flag-icon-gb flag-icon-squared"></span> </li> 
                      </ul> 
             </div> 
        </div> 
</div>

That’s it. Let me know if you face any difficulties.

You can watch my previous blog here.

Hire AngularJs Developers in India to build enterprise-grade, cost-effective Angular web apps that are secure, scalable, and dynamic. The top AngularJS developers around the globe work at Vision Infotech, an AngularJS Web App Development Company in India, and they’re all equipped with the most up-to-date Angular developer tools and skillsets.

Happy Coding {;} ????