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