Description
Shows a dropdown-menu of available languages
Example
Methods
|
changeLocale
|
changeLocale(lang: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| lang |
string
|
No
|
|
|
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-dropdown {
max-width: 320px;
width: 100%;
}
Legend
Html element with directive