Emoji displaying

[khitrukhina]

I see, that you've already answered on issues like that, but it IS here. They are partially displayed. And when they are not, the text is displayed. Like on the attached screenshot. I am using Angular.

[necessarylion]

Which plugin or library did you used for select box? May be the plugin issue?

[khitrukhina]

It's angular material )

[necessarylion]

Could you show your code here?
It work fine for me.

 <mat-form-field appearance="fill">
    <mat-label>Country Codes</mat-label>
    <mat-select>
      <mat-option *ngFor="let list of countryLists" [value]="list.dial_code">
        {{list.flag}} {{list.dial_code}}
      </mat-option>
    </mat-select>
  </mat-form-field>

import { Component } from '@angular/core';
//@ts-ignore
import CountryList from 'country-list-with-dial-code-and-flag'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app-angular';
  countryLists = CountryList.getList();
}

[khitrukhina]

Maybe you have met some unexpected behaviour with emojis?)

[khitrukhina]

It's Windows problem. Everyone who has linix/mac - sees emoji. Windows - no.

https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=4

[necessarylion]

There are svg and png format available here in this repo.
May be you can download and use in your code.

[khitrukhina]

Have used this polyfill
https://www.npmjs.com/package/country-flag-emoji-polyfill

[khitrukhina]

Removed pollyfill as its working only with cdn.
Resolved like this:
angular.json
{ "glob": "**/*", "input": "./node_modules/country-list-with-dial-code-and-flag/assets/png", "output": "assets/flags" }

component:
` readonly countriesList = countryList.getList().map(country => {
const pathName = country.code.toLowerCase();
if (pathName === 'an') {
return country;
}

country.path = `./assets/flags/${pathName}.png`;
return country;

});`

[necessarylion]

New version 4.0 now support svg.
https://www.npmjs.com/package/country-list-with-dial-code-and-flag/v/4.0.0

import CountryFlagSvg from 'country-list-with-dial-code-and-flag/dist/flag-svg'

const myanmar = CountryList.findOneByCountryCode('mm')
if(myanmar) {
    const flagSvg = CountryFlagSvg[myanmar.code] // .js
    const flagSvg = CountryFlagSvg[myanmar.code as never] // .ts
    console.log(flagSvg) // it return svg string
}

[tortuc]

I tried to use the svg string in angular project, but it's not shown.

[necessarylion]

I haven't try svg on angular project yet. Not sure if we can use like this?

const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(flagSvg)}`;

And then use in image src.