Adding country flags is really struggling thing?

Angular

I am using bootstrap, typescript and mysql database for my angular application. My database supports multilingual characters already. I want to add a flag of the country to show where the user is belongs to!

Let's say, someone from Canada creates profile on my website, I have to show Canada flag under his profile and bio!

Adding multiple countries are taking much time and the images founded on google are might be/not might be CC0 by creative commons. So how do I add the respective country flags automatically without downloading individual files for all the countries?

I am bringing standard country codes from the backend API already. I need some help to fix UI - country flag issues!

Comments

Mohamed Atef

25 Feb 2022

You can generate it like HTML emoji using a fuction like

 countryToFlag(isoCode) {
 return typeof String.fromCodePoint !== 'undefined'
 ? isoCode
 .toUpperCase()
 .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))
 : isoCode;
 }
 countryToFlag('UK');

this way will work fine with you but not all of the browsers gonna support it so you can use an external API from flagCDN and you can call any flag in this way

<img src='//flagcdn.com/16x12/uk.png' alt="UK" />

Good luck, let me know if you have any questions

Replies

Rakshit

25 Feb 2022

Thank you for the quick response, it looks good. I will try. Is this cdn link provided by you valid? Will it work for long time?

Last week one IP service provider went down and we lose the logic SOW (statement of work)! Some free cdns or APIs are risky, that's why I am asking.

Shilpa

25 Feb 2022

Best Answer

If you want to use the third-party library for adding any country flag, you just need to install cdn js and you need to pass your country's standard iso code. Recently In my project, I am using it, so hopefully, it will be also helpful for your requirements too!

This approach is CSS/SVG based, so you can use it for any web framework like, Vue js, React js, javascript, typescript and normal HTML CSS templates too.

Here is the code snippet, This approach is SVG-CSS based, so it will directly add files for you in your build path

Add third-party dependency to your package JSON,

npm install flag-icon-css

2. Update your angular.json file with the following CSS line,

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

3. Add a line in your component HTML file where you want to add the flag of your country name?

<span class=”flag-icon flag-icon-ca flag-icon-squared”></span>

As shown above, you just need to add country code for the flag-icon-xx, where xx is the country code.

You can add square or rectangle flags by just adding a class flag-icon-squared. Visit

That's it! You are done!

See this Live Demo (forked from Stackblitz)

Replies

Rakshit

25 Feb 2022

Thank you, it will be helpful. Here I wrote an article about it, it must be helpful to others. [Article Link]

Rakshit

26 Feb 2022

Hello Shilpa,

When I added mentioned library and added the code snippet, it works fine for me.

ng build --prod

But when I build my angular project with production build, all the SVG images are showing up on the root directory. I tried to find out, how to update the path of all country SVGs at building time but didn't work full proof.

Can you please guide me regarding that, if you have any idea - please let me know?

Your help will be appreciated.

Shilpa

26 Feb 2022

Yes, and thank you for your kind words.

You can assign the path of your SVG files to your angular.json file. Alternatively, you should put index.html or index.php or index.jsp file to your respective backend, so no one can see your file listings directly.