TL;DR – Learn the best way to add country flag icons in Angular with this comprehensive guide. Easy methods and tips included!
In this article, you will learn about how to make a simple process to add flags or icons of the country flags in your fantastic web application, whether it is made using Angular, React, Vue, or any other Javascript framework, this approach will save you a lot of time for sure.
In case you are looking to get the country list from your database, here I prepared some MySQL scripts for a country list, state list, city list, and continent list. Please note that the above-given geolocation is available for EARTH only, not for the MARS yet.
Here I used the Angular project to demonstrate the CSS approach to add a number of flags within a minute. You need to add relevant classes made under the flag-icons third-party library.
Use MySQL to database to get all countries list dynamic to Add Country Flag Icons
You can download mysql database queries for Continents, Countries, States, Cities and mapping of Continents and countries from below location.
Wondering, where will these country flags be used?
There are no limitations or restrictions for using flag icons or buttons unless you own your application. It will help you for,
- Displaying user location in your app
- While dealing with IP address or a country
- Contact Information dropdown list
- i18n — Internationalization for various language support
- User belonging country
Prerequisites:-
- Node JS (v10+ )
- Angular CLI (v2+)
- Typescript (v2+)
- Code editors like Visual Studio Code, or Intellij
- flag-icons npm library (Live demo)
Steps By Step Guide for Implementing CSS Flag Icons
1. Install the flag-icons package through NPM in your Angular Project.
npm i flag-iconsYou can either download above mentioned package in your node_modules, or you can use Flag-icons Project on Github Open-Source so that you can customize files and datasets as per your requirements.
2. Import CSS by CDN link tag in an HTML file or using angular.json
Open your index.html file, and put the below line of code just before your .
...
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"
/>
</head>
-OR- You can import flag-icons.min.css in your angular.json file > styles: []
...
"architect": {
...
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"styles": [
...
"src/assets/font-awesome/css/font-awesome.min.css",
"./node_modules/flag-icons/css/flag-icons.min.css"
],
...
...I recommended everyone download and put it in their assets folder and refer it from there. It will avoid breaking your website country flag functionality if CDN is shut down or the individual file might be missing in the future.
3. Apply CSS classes to show the flag icon to your component HTML file.
Open your *.component.html file and type the below classes to render the flag.
<h3>India <span class="fi fi-XX"></span></h3>
Where xx in class fi-xx is the standard ISO code for the country in lowercase. For an instance, in for India. ca for Canada, etc.
If you are trying to add a country code dynamically in your angular project, you should try the following syntax.
<h3>India <span class="fi fi-in"></span></h3>
<h3>Canada <span class="fi fi-ca"></span></h3>
<br>
<h3>India <span class="fi fi-{{countryCode | lowercase}}"></span></h3>
<h3>Canada <span class="fi fi-{{countryCode | lowercase}}"></span></h3>
Isn’t it easy?
Output:
You can check the live stackblitz build here.
Flag-icons CSS angular stackblitz example | Image by Author
Summary:
You can save a lot of time to download each country flag to your assets directory and link them when requires to render on UI with multiple purposes. This library made your goal simple.
What did you learn from this article?
- About how to use CDN and NPM library to avoid lots of lines of code.
- Add country flags with your angular framework easily.
- List of countries and their ISO codes.
References:
- Node JS & Npm Manager
- Angular CLI
- npm/flag-icons (Third-party library)
- Stackblitz — to prepare the demo
- MySQL scripts — For country, state, city, and continents
Hope you find this work worthwhile. You can play with the live demo here on stackblitz.
Your valuable support
You can also support my work with a donation — If you want to donate to me however much you can afford, it means and helps more than you can imagine. You can give tips too using Buy me a coffee. The donation amount will help me to run the website, and server, So I can bring up innovative, knowledgeable things as always.
Become a Medium member if you want to read more interesting stories like this. It will cost you $5/Month or $50/Year and provides you unlimited access to Medium stories. I will receive a small commission when you use my membership link for signup.
© Originally published on Medium by Author.
It is republished on Vocal Media by Unbounded Soul with Permissions.
Discover more from 9Mood
Subscribe to get the latest posts sent to your email.
0 Comments