src/app/core/language/language-select/language-select.component.ts
Shows a dropdown-menu of available languages
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-language-select |
| imports |
MatSelectModule
|
| styleUrls | ./language-select.component.scss |
| templateUrl | ./language-select.component.html |
Properties |
Methods |
Inputs |
| availableLocales | |
Type : ConfigurableEnumValue[]
|
|
Default value : []
|
|
| changeLocale | ||||||
changeLocale(lang: string)
|
||||||
|
Parameters :
Returns :
void
|
| currentLocale |
Type : unknown
|
Default value : signal(this.languageService.getCurrentLocale())
|
import {
ChangeDetectionStrategy,
Component,
inject,
input,
signal,
} from "@angular/core";
import { MatSelectModule } from "@angular/material/select";
import { ConfigurableEnumValue } from "app/core/basic-datatypes/configurable-enum/configurable-enum.types";
import { LanguageService } from "#src/app/core/language/language.service";
/**
* Shows a dropdown-menu of available languages
*/
@Component({
selector: "app-language-select",
templateUrl: "./language-select.component.html",
styleUrls: ["./language-select.component.scss"],
imports: [MatSelectModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LanguageSelectComponent {
private readonly languageService = inject(LanguageService);
availableLocales = input<ConfigurableEnumValue[]>([]);
currentLocale = signal(this.languageService.getCurrentLocale());
changeLocale(lang: string): void {
this.currentLocale.set(lang);
this.languageService.switchLocale(lang);
}
}
<mat-form-field appearance="fill" class="language-select-dropdown">
<mat-label i18n>Choose your language</mat-label>
<mat-select
[value]="currentLocale()"
(selectionChange)="changeLocale($event.value)"
>
@for (locale of availableLocales(); track locale.id) {
<mat-option [value]="locale.id">
{{ locale.label }}
</mat-option>
}
</mat-select>
</mat-form-field>
./language-select.component.scss
.language-select-dropdown {
max-width: 320px;
width: 100%;
}