admin

Please wait...

Multi Language Settings

language Multi-Language Support Overview

MediDash is built with internationalization in mind and comes with built-in support for three languages: English, German, and Spanish. The template uses the popular ngx-translate library to provide a robust and flexible solution for managing translations. You can easily add more languages to meet your specific requirements.

info_outline
Location of Translation Files: All language translations are stored as JSON files in the src/assets/i18n directory. Each file is named with the corresponding language code (e.g., en.json, de.json).

add_circle_outline Adding a New Language

In this example, we'll walk you through the process of adding Russian language support to the template.

1
Create the Language File

The first step is to create a new JSON file for the Russian language. Create a new file named ru.json in the src/assets/i18n directory. You can use the existing language files (e.g., en.json) as a reference for the structure and format of the file.

2
Update the Language Service

Next, you need to add the new language to the list of available languages in the LanguageService. Open the file src/app/core/services/language.service.ts and add the new language code to the languages array: 


// Add 'ru' to the list of available languages
public languages: string[] = ['en', 'es', 'de', 'ru'];

// Update the regex to include the new language
translate.use(browserLang.match(/en|es|de|ru/) ? browserLang : 'en');
3
Update the Header Dropdown

To allow users to select the new language, you need to add it to the language dropdown in the header. Modify the file layout/header/header.component.ts and add the new language to the listLang array: 


// Add the new language to the dropdown list
listLang = [
    { text: 'English', flag: 'assets/images/flags/us.jpg', lang: 'en' },
    { text: 'Spanish', flag: 'assets/images/flags/spain.jpg', lang: 'es' },
    { text: 'German', flag: 'assets/images/flags/germany.jpg', lang: 'de' },
    { text: 'Russian', flag: 'assets/images/flags/russian.jpg', lang: 'ru' },
];
4
Add the Flag Image

Finally, you need to add the flag image for the new language. Place the Russian flag image (e.g., russian.jpg) in the assets/images/flags directory. This will ensure that the flag is displayed correctly in the language dropdown.