Language Selection Component

Version: 1.0.0

Description

Angular standalone component for language selection with Material Design radio buttons. This component provides a user-friendly interface for selecting languages in internationalized applications.

Features

• Standalone Angular component (no module required)
• Material Design radio buttons for language selection
• Integration with @vsirotin/localizer for i18n support
• Displays language names in both English and original language
• Responsive and accessible design

Installation

From NPM

npm install @vsirotin/language-selection-component

Local Development

npm install file:../../dist/@vsirotin/language-selection-component

Dependencies

This component requires the following peer dependencies:

• @angular/common ^19.0.0
• @angular/core ^19.0.0
• @angular/forms ^19.0.0
• @angular/material ^19.0.0
• @vsirotin/localizer ^1.0.0

Usage

Import the component in your Angular application:

import { LanguageSelectionComponent } from '@vsirotin/language-selection-component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LanguageSelectionComponent],
  template: '<app-language-selection></app-language-selection>'
})
export class AppComponent {}

Component API

Selector

app-language-selection

Properties

• selectedLangCode: Currently selected language code (string | null)
• supportedLanguages: Array of supported languages from @vsirotin/localizer

Methods

• onRadioChange(): Handles language selection change events

Styling

The component includes default Material Design styling. You can customize the appearance by overriding these CSS classes:

• .settings-radio-group: Container for radio buttons
• .settings-radio-button: Individual radio button styling

License

Apache-2.0

Author

Dr. Viktor Sirotin
www.sirotin.eu

Repository

https://github.com/vsirotin/digital-treasure-chest