Best Way To Add Country Flags Icon In Angular
A powerful approach to render country flag icons in your web apps.
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.
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-icons
You 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>.
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"/>
</head>
-OR- You can import flag-icons.min.css in your angular.json file > styles: []
"./node_modules/flag-icons/css/flag-icons.min.css"
Put it like this,
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.
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.
Get my stories in your feeds by subscribing to me, or become a member to read all stories of thousands of other writers, participate in all challenges and get a payout with low fees and less payout threshold on Vocal Media. I will get a small commission amount, but you don't have to pay extra for it, You can't believe, it will help me out much. Thank you in advance.
Originally published on Medium.
About the Creator
Unbounded Soul
25, Poet, Learner, Searching for lots of adventures, Traveler.
Keep reading
More stories from Unbounded Soul and writers in 01 and other communities.
Generative AI Revolution – Unleashing The Future Of Artificial Intelligence
Generative AI is a key part of the “Generative AI Revolution.” It refers to AI systems that can create new content, images, or even complete stories on their own. This differs from traditional AI. Its primary focus is on tasks like sorting or predicting from existing data. Generative AI introduces a big change. It lets machines create original content. This has led to advances in fields like content creation, art, and drug discovery.
By Bit Code Solutiona day ago in 01
Comments
There are no comments for this story
Be the first to respond and start the conversation.