funky-framadate-front/src/app/core/components/selectors/language-selector/language-selector.component.ts

import { Component, DoCheck, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { Language } from '../../../enums/language.enum';
import { StorageService } from '../../../services/storage.service';

@Component({
	selector: 'app-language-selector',
	templateUrl: './language-selector.component.html',
	styleUrls: ['./language-selector.component.scss'],
})
export class LanguageSelectorComponent implements OnInit, DoCheck {
	public currentLang: Language;
	public languagesAvailable: string[] = Object.values(Language);

	constructor(private translate: TranslateService, private storageService: StorageService) {}

	ngOnInit(): void {
		const currentBrowserLanguage: Language = this.translate.getBrowserLang().toUpperCase() as Language;
		if (this.storageService.language && Object.keys(Language).includes(this.storageService.language)) {
			this.currentLang = this.storageService.language;
		} else if (Object.keys(Language).includes(currentBrowserLanguage)) {
			this.currentLang = currentBrowserLanguage;
		} else {
			this.currentLang = Language.EN;
		}
		this.updateLanguage();
	}

	ngDoCheck(): void {
		this.updateLanguage();
	}

	public updateLanguage(): void {
		this.translate.use(this.currentLang.toString().toUpperCase());
		this.storageService.language = this.currentLang;
	}
}