nxt-components
Github

Angular country flags

GitHub license  npm  scope

Angular component to show flags based on country ISO code.

Basic usage

View on GitHub

Size

xxs

xs

s

m

l

xl

xxl

Custom size

Format

none

square

round

<select [(ngModel)]="code"
    class="form-select">
    <option *ngFor="let i of data"
        [value]="i.code">{{ i.name }} (ISO code: {{ i.code }})</option>
</select>
 
<div>
    <div>
        <h3 class="h5">Size</h3>
 
        <h4 class="h6">xxs</h4>
        <nxt-flag [country]="code"
            size="xxs"></nxt-flag>
 
        <h4 class="h6">xs</h4>
        <nxt-flag [country]="code"
            size="xs"></nxt-flag>
 
        <h4 class="h6">s</h4>
        <nxt-flag [country]="code"
            size="s"></nxt-flag>
 
        <h4 class="h6">m</h4>
        <nxt-flag [country]="code"
            size="m"></nxt-flag>
 
        <h4 class="h6">l</h4>
        <nxt-flag [country]="code"
            size="l"></nxt-flag>
 
        <h4 class="h6">xl</h4>
        <nxt-flag [country]="code"
            size="xl"></nxt-flag>
 
        <h4 class="h6">xxl</h4>
        <nxt-flag [country]="code"
            size="xxl"></nxt-flag>
 
        <h4 class="h6">Custom size</h4>
        <nxt-flag [country]="code"
            [size]="120"></nxt-flag>
    </div>
    <div>
        <h3 class="h5">Format</h3>
 
        <h4 class="h6">none</h4>
        <nxt-flag [country]="code"></nxt-flag>
 
        <h4 class="h6">square</h4>
        <nxt-flag [country]="code"
            format="square"></nxt-flag>
 
        <h4 class="h6">round</h4>
        <nxt-flag [country]="code"
            format="round"></nxt-flag>
    </div>
</div>
import { Component, ViewEncapsulation } from '@angular/core'
import { remove as removeDiacritics } from 'diacritics'
import { getName, registerLocale } from 'i18n-iso-countries'
import locl from 'i18n-iso-countries/langs/en.json'
import { FlagDatabaseKey } from 'nxt-flags'
 
registerLocale(locl)
 
@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.component.html',
    styleUrls: ['./basic-example.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class BasicExampleComponent {
 
    code: FlagDatabaseKey = 'es'
 
    // Load a list of countries from ISO countries database to use in select
    readonly data = Object.keys(locl.countries).map(c => ({
        code: c.toLowerCase(),
        name: getName(c.toUpperCase(), 'en')
    }))
        .filter((v): v is typeof v & { name: string } => !!v.name)
        .sort((a, b) => normalizeCompare(a.name, b.name))
}
 
function normalizeCompare(a: string, b: string) {
    return normalize(a).localeCompare(normalize(b))
}
 
function normalize(val: string) {
    return removeDiacritics('' + (val || ''))
        .toLowerCase()
        .trim()
}