File
Implements
Metadata
| selector |
cd-language-selector |
| styleUrls |
./language-selector.component.scss |
| templateUrl |
./language-selector.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
isDropdown
|
Default value : true
|
|
|
Methods
|
changeLanguage
|
changeLanguage(lang: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| lang |
string
|
No
|
|
|
selectedLanguage
|
Type : string
|
|
|
|
supportedLanguages
|
Default value : SupportedLanguages
|
|
|
import { Component, Input, OnInit } from '@angular/core';
import { LocaleHelper } from '../../../locale.helper';
import { SupportedLanguages } from './supported-languages.enum';
@Component({
selector: 'cd-language-selector',
templateUrl: './language-selector.component.html',
styleUrls: ['./language-selector.component.scss']
})
export class LanguageSelectorComponent implements OnInit {
@Input()
isDropdown = true;
supportedLanguages = SupportedLanguages;
selectedLanguage: string;
ngOnInit() {
this.selectedLanguage = LocaleHelper.getLocale();
}
changeLanguage(lang: string) {
LocaleHelper.setLocale(lang);
// Reload frontend
window.location.reload();
}
}
<div dropdown
*ngIf="isDropdown">
<a dropdownToggle
class="dropdown-toggle"
data-toggle="dropdown"
i18n-title
title="Select a Language">
{{ supportedLanguages[selectedLanguage] }}
<span class="caret"></span>
</a>
<ul *dropdownMenu
class="dropdown-menu dropdown-menu-right">
<li *ngFor="let lang of supportedLanguages | keyvalue">
<a class="dropdown-item"
(click)="changeLanguage(lang.key)">{{ lang.value }}</a>
</li>
</ul>
</div>
<select *ngIf="!isDropdown"
(change)="changeLanguage($event.target.value)"
[(ngModel)]="selectedLanguage"
class="form-control">
<option *ngFor="let lang of supportedLanguages | keyvalue"
[value]="lang.key">{{ lang.value }}</option>
</select>
Legend
Html element with directive