Handle your Angular translations with Ngx Translate
⚙️ Install lib
𝒏𝒑𝒎 𝒊𝒏𝒔𝒕𝒂𝒍𝒍 @𝒏𝒈𝒙-𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆/𝒄𝒐𝒓𝒆 --𝒔𝒂𝒗𝒆
𝒏𝒑𝒎 𝒊𝒏𝒔𝒕𝒂𝒍𝒍 @𝒏𝒈𝒙-𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆/𝒉𝒕𝒕𝒑-𝒍𝒐𝒂𝒅𝒆𝒓 --𝒔𝒂𝒗𝒆
📦 Import the modules in AppModule
@𝑵𝒈𝑴𝒐𝒅𝒖𝒍𝒆({
𝒅𝒆𝒄𝒍𝒂𝒓𝒂𝒕𝒊𝒐𝒏𝒔: [
𝑨𝒑𝒑𝑪𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕
],
𝒊𝒎𝒑𝒐𝒓𝒕𝒔: [
𝑯𝒕𝒕𝒑𝑪𝒍𝒊𝒆𝒏𝒕𝑴𝒐𝒅𝒖𝒍𝒆,
𝑩𝒓𝒐𝒘𝒔𝒆𝒓𝑴𝒐𝒅𝒖𝒍𝒆,
𝑨𝒑𝒑𝑹𝒐𝒖𝒕𝒊𝒏𝒈𝑴𝒐𝒅𝒖𝒍𝒆,
𝑻𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆𝑴𝒐𝒅𝒖𝒍𝒆.𝒇𝒐𝒓𝑹𝒐𝒐𝒕({
𝒅𝒆𝒇𝒂𝒖𝒍𝒕𝑳𝒂𝒏𝒈𝒖𝒂𝒈𝒆: '𝒆𝒏',
𝒍𝒐𝒂𝒅𝒆𝒓: {
𝒑𝒓𝒐𝒗𝒊𝒅𝒆: 𝑻𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆𝑳𝒐𝒂𝒅𝒆𝒓,
𝒖𝒔𝒆𝑭𝒂𝒄𝒕𝒐𝒓𝒚: 𝑯𝒕𝒕𝒑𝑳𝒐𝒂𝒅𝒆𝒓𝑭𝒂𝒄𝒕𝒐𝒓𝒚,
𝒅𝒆𝒑𝒔: [𝑯𝒕𝒕𝒑𝑪𝒍𝒊𝒆𝒏𝒕]
}
}) ] 𝒑𝒓𝒐𝒗𝒊𝒅𝒆𝒓𝒔: [],
𝒃𝒐𝒐𝒕𝒔𝒕𝒓𝒂𝒑: [𝑨𝒑𝒑𝑪𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕]
})
𝒆𝒙𝒑𝒐𝒓𝒕 𝒄𝒍𝒂𝒔𝒔 𝑨𝒑𝒑𝑴𝒐𝒅𝒖𝒍𝒆 { }
🌐 Fill i18n fr files
fr.json:
{
"𝑯𝑬𝑳𝑳𝑶": "𝒃𝒐𝒏𝒋𝒐𝒖𝒓 {{𝒗𝒂𝒍𝒖𝒆}}"
}
en:
{
"𝑯𝑬𝑳𝑳𝑶": "𝒉𝒆𝒍𝒍𝒐 {{𝒗𝒂𝒍𝒖𝒆}}"
}
💉 Inject service in your component
𝒄𝒐𝒏𝒔𝒕𝒓𝒖𝒄𝒕𝒐𝒓(𝒑𝒓𝒊𝒗𝒂𝒕𝒆 𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆: 𝑻𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆𝑺𝒆𝒓𝒗𝒊𝒄𝒆) {
𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒂𝒅𝒅𝑳𝒂𝒏𝒈𝒔(['𝒆𝒏', '𝒇𝒓']);
𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒔𝒆𝒕𝑫𝒆𝒇𝒂𝒖𝒍𝒕𝑳𝒂𝒏𝒈('𝒆𝒏');
𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒖𝒔𝒆('𝒆𝒏');
}
🔃 Add a switch button
template:
<𝒉1>{{ '𝑯𝑬𝑳𝑳𝑶' | 𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆:𝒑𝒂𝒓𝒂𝒎 }}
<𝒃𝒖𝒕𝒕𝒐𝒏 (𝒄𝒍𝒊𝒄𝒌)='𝒔𝒘𝒊𝒕𝒄𝒉()'>𝑺𝒘𝒊𝒕𝒄𝒉 𝒍𝒂𝒏𝒈𝒖𝒂𝒈𝒆
controller:
𝒔𝒘𝒊𝒕𝒄𝒉() {
𝒊𝒇 (𝒕𝒉𝒊𝒔.𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒈𝒆𝒕𝑫𝒆𝒇𝒂𝒖𝒍𝒕𝑳𝒂𝒏𝒈() === '𝒆𝒏') {
𝒕𝒉𝒊𝒔.𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒖𝒔𝒆('𝒇𝒓');
} 𝒆𝒍𝒔𝒆 {
𝒕𝒉𝒊𝒔.𝒕𝒓𝒂𝒏𝒔𝒍𝒂𝒕𝒆.𝒖𝒔𝒆('𝒆𝒏');
}
}
🧙♂️ Enjoy the magic