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 |
constructor()
|
| availableLocales | |
Type : ConfigurableEnumValue[]
|
|
Default value : []
|
|
| changeLocale | ||||||
changeLocale(lang: string)
|
||||||
|
Parameters :
Returns :
void
|
| currentLocale |
Type : string
|
import {
ChangeDetectionStrategy,
Component,
inject,
Input,
} 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);
@Input() availableLocales: ConfigurableEnumValue[] = [];
currentLocale: string;
constructor() {
this.currentLocale = this.languageService.getCurrentLocale();
}
changeLocale(lang: string) {
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%;
}