File
Implements
Metadata
| selector |
mat-language-menu |
| styleUrls |
./mat-language-menu.component.scss |
| templateUrl |
./mat-language-menu.component.html |
Outputs
|
onLanguageChanged
|
Type : EventEmitter<string>
|
|
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
export interface Language {
id: string;
title: string;
flag: string;
}
@Component({
selector: 'mat-language-menu',
templateUrl: './mat-language-menu.component.html',
styleUrls: ['./mat-language-menu.component.scss']
})
export class MatLanguageMenuComponent implements OnInit {
@Input()
languages: Language[];
@Input()
selectedLanguage: Language;
@Output()
onLanguageChanged: EventEmitter<string> = new EventEmitter();
constructor() {
}
ngOnInit() {
}
/**
* Set the language
*
* @param lang
*/
setLanguage(lang: Language): void {
// Set the selected language for the toolbar
this.selectedLanguage = lang;
// Use the selected language for translations
// this._translateService.use(lang.id);
this.onLanguageChanged.emit(lang.id);
}
}
<button mat-button
class="language-button"
[matMenuTriggerFor]="languageMenu">
<div fxLayout="row" fxLayoutAlign="center center">
<img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage?.flag+'.png'">
<span class="iso text-uppercase">{{selectedLanguage?.id}}</span>
</div>
</button>
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
<span fxLayout="row" fxLayoutAlign="start center">
<img class="flag mr-16" [src]="'assets/images/flags/'+lang?.flag+'.png'">
<span class="iso">{{lang?.title}}</span>
</span>
</button>
</mat-menu>
.language-button {
min-width: 64px;
height: 64px;
}
button {
outline: none;
}
img {
max-width: 100%;
height: 16px;
vertical-align: top;
border: none;
margin-right: 8px;
}
Legend
Html element with directive