Return to site

ANGULAR TIP: For Angular Translation ๐Ÿ‘‰ Use ngx-translate

ยท angular,github

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

 

All Posts
ร—

Almost doneโ€ฆ

We just sent you an email.ย Please click the link in the email to confirm your subscription!

OK