2. Usage
// ----------------------------------------------------
// File: src/app/layouts/full/vertical/header/header.component.ts
// ----------------------------------------------------
public selectedLanguage: any = {
language: 'English',
code: 'en',
type: 'US',
icon: '/assets/images/flag/icon-flag-en.svg',
};
public languages: any[] = [
{
language: 'English',
code: 'en',
type: 'US',
icon: '/assets/images/flag/icon-flag-en.svg',
},
{
language: 'Español',
code: 'es',
icon: '/assets/images/flag/icon-flag-es.svg',
},
{
language: 'Français',
code: 'fr',
icon: '/assets/images/flag/icon-flag-fr.svg',
},
{
language: 'German',
code: 'de',
icon: '/assets/images/flag/icon-flag-de.svg',
},
];
constructor(
private translate: TranslateService
) {
translate.use('en');
}
changeLanguage(lang: any): void {
this.translate.use(lang.code);
this.selectedLanguage = lang;
}
// ----------------------------------------------------
// File: src/app/layouts/full/vertical/header/header.component.html
// ----------------------------------------------------
<button [matMenuTriggerFor]="flags" mat-icon-button>
<img [src]="selectedLanguage.icon" class="rounded-full object-cover size-5!" />
</button>
<mat-menu #flags="matMenu" class="cardWithShadow" xPosition="before">
@for(lang of languages; track lang.icon) {
<button mat-menu-item (click)="changeLanguage(lang)">
<div class="flex items-center">
<img [src]="lang.icon" class="rounded-full object-cover me-2 size-5!" />
<span class=" text-sm">{{ lang.language }}</span>
</div>
</button>
}
</mat-menu>
