ui-lang-selector

Language selector component for Angular apps using Transloco and PrimeIcons.

Requirements

• Angular 19+
• @jsverse/transloco
• primeicons

Installation

npm install @jcarlosaguirredev/ui-lang-selector

Setup

1. Import the component

import { UiLangSelectorComponent, Language, LANGUAGES } from '@jcarlosaguirredev/ui-lang-selector';

@Component({
  imports: [UiLangSelectorComponent],
  // ...
})
export class MyComponent {
  private transloco = inject(TranslocoService);

  get activeLang(): Language {
    const code = this.transloco.getActiveLang();
    return LANGUAGES.find(l => l.code === code) ?? LANGUAGES[0];
  }

  onLangChange(lang: Language): void {
    this.transloco.setActiveLang(lang.code);
  }
}

2. Add to template

<ui-lang-selector
  [activeLang]="activeLang"
  listPosition="bottom-right"
  (changeLang)="onLangChange($event)"
/>

Inputs / Outputs

| Name | Type | Default | Description | |----------------|---------------------------------------------------------|---------------|-------------------------------------| | activeLang | Language (required) | — | Currently active language | | listPosition | top-left \| top-right \| bottom-left \| bottom-right | 'top-right' | Position of the dropdown | | changeLang | OutputEmitterRef<Language> | — | Emits the selected language |

Language model

interface Language {
  code: string;  // e.g. 'en'
  label: string; // e.g. 'English'
  flag: string;  // e.g. '🇬🇧'
}

Built-in languages: English (en) and Español (es).