user image

Rakshit
Published in : 2022-02-25

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 Date : 2022-02-25

Best answers

46

Best answers

46

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='https://flagcdn.com/16x12/uk.png' alt="UK" />

Good luck, let me know if you have any questions 

Rakshit Date : 2022-02-25

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 Date : 2022-02-25

Best answers

10

Best answers

10

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

  1. 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)

Rakshit Date : 2022-02-25

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

Rakshit Date : 2022-02-26

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 Date : 2022-02-26

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.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.
Publish date: 2022-03-06 | Comments: 0

Tag: Angular

Angular: HTML anchor tag with #idref issue
Publish date: 2022-03-01 | Comments: 2

Tag: Angular

How to calculate distance between two Bluetooth devices?
Publish date: 2022-02-26 | Comments: 1

Tag: Angular

How to bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular