Angular

First Install

Example Component

Create a flag-list.component.ts to display all flags or filter by country:

import { Component } from '@angular/core';
import { getAllFlags, getFlagsByCountry, getFlagSvg } from 'open-flags';

@Component({
  selector: 'app-flag-list',
  template: `
    <div>
      <h1>Flags</h1>
      <input [(ngModel)]="country" placeholder="Enter country code" />
      <div *ngFor="let flag of flagsToDisplay()">
        <h2>{{ flag }}</h2>
        <div [innerHTML]="getFlagSvgContent(flag)"></div>
      </div>
    </div>
  `,
})
export class FlagListComponent {
  country: string = '';

  flagsToDisplay(): string[] {
    return this.country ? getFlagsByCountry(this.country) : getAllFlags();
  }

  getFlagSvgContent(flag: string): string {
    const [country, region] = flag.split('/');
    return getFlagSvg(country, region);
  }
}

Add FormsModule to your AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FlagListComponent } from './flag-list.component';

@NgModule({
  declarations: [AppComponent, FlagListComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}