Angular 13 Language Translations using ngx-translate - Multilingual Angular App

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 พ.ย. 2024

ความคิดเห็น • 21

  • @barstanrverdi3119
    @barstanrverdi3119 ปีที่แล้ว +3

    Hello Tapan,
    First of all, thanks for sharing. I'm going to have a question.
    I am trying to implement multi-language selection in my project. But the app.component.html is also {{ .... I translate }} I can do the operation. I don't see this method on the subpages and I can't use it.
    I can't use this structure in the view file , the html page does not see the traslate service, can you help me with this? I hope I was able to ask.

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      Sure Thank you for watching, so please correct me if i am wrong here, you are saying that you are not able to add this translation in html and you want to do it with components? If this is your question than yes we can read this value in components as well.

  • @pranabkumarmoharana1137
    @pranabkumarmoharana1137 ปีที่แล้ว +1

    Hi @TapanDubey did you install both /core and /htttploader by running command from a console? Because just by adding those 2 to package file I don't understand how does that work. Not working for me

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      We need both and then you need to run command npm Install so that will install both packages. You can check this live example and let me know you have any other questions. Thank you for watching.
      stackblitz.com/edit/primeng-selectbutton-demo-khmex7?file=package.json

  • @anzeelahanif4174
    @anzeelahanif4174 ปีที่แล้ว

    how to create json files for any other languge if I just know englis and urdu . I have large application and rich UI to convert into other language also my application gets some data from other 3rd paty api

  • @shivakumar7578
    @shivakumar7578 2 ปีที่แล้ว +1

    Can we access the HOME object in ts file using translate service (so that I can use it like regular objects and still I can translate )instead of accessing the keys inside it directly ?

    • @TapanDubey
      @TapanDubey  2 ปีที่แล้ว +1

      Good question Shiva, Yes you can access Complete Home Object from component using translate service. it should be like this, here you will get response type as ANY. I will recommend to create similar interface and map it with that to get strongly typed response. I hope this is what you were asking. Thank you for watching.
      this.translate.get('HOME').subscribe((e) => {
      console.log(e);
      });

    • @shivakumar7578
      @shivakumar7578 2 ปีที่แล้ว

      @@TapanDubey I will surely try this Tapan , Thank you.

  • @shivakumar7578
    @shivakumar7578 2 ปีที่แล้ว +2

    Hello Tapan , I did not understand how that html file is able to fetch data from the json files. How are they linked ? I see similar translations are being used in our OTP project as well.

    • @TapanDubey
      @TapanDubey  2 ปีที่แล้ว +3

      We are using NGX-TRANSLATE library to fetch a data from JSON file, if you will observe name of JSON file is similar to what we have added for language value, so on each language selection it will fetch data from that JSON file.
      Example -
      this.translation.use('en') than in this case it will look for en.json file under i18n folder.

    • @shivakumar7578
      @shivakumar7578 2 ปีที่แล้ว +2

      @@TapanDubey I have understood now. Recently I have got review comments from Amet to use translations for the some strings to display in the UI so that it will be useful when we give the project for other languages. Though I used translation I did not understand what he exactly meant . Now I have got it perfectly.

    • @TapanDubey
      @TapanDubey  2 ปีที่แล้ว

      Thank you Shiva!

    • @georgiarammou1357
      @georgiarammou1357 ปีที่แล้ว +1

      I have a question as well what if I want in the same language to have for the same variable a different value bc ie one customer want to have a different name and another a different one. Can I do that? Bc the translate service reads the name of the json which the abbreviation of the language

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      ​@@georgiarammou1357 ​ yes in that case you need to generate language file for each customer for example now we have en.json file but you will have custid.json language file under i18n folder and instead of this.translation.use('en') you will have this.translation.use('custId')
      In simple steps -
      1. Create customer JSON file dynamically while you are creating customer.
      2. store customer language file in i18n folder.
      3. change code to this. translation.use('custid')
      That's all you needed , i hope this is what you were looking. Thank you for watching.

  • @romdaro5721
    @romdaro5721 ปีที่แล้ว +1

    man can you give me sorce code .

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      you can find source code at -
      stackblitz.com/edit/primeng-selectbutton-demo-khmex7?file=README.md

  • @electricindro2236
    @electricindro2236 ปีที่แล้ว

    A totally nonsensical video.
    If developers already know what should be the translated file, it doesn't make sense to have such ngx-translate library

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      You are misunderstanding the concept or may be you should study Angular first. This translation library to support multiple languages file , that is angular feature, what you are looking can be achieved by Google translate api or any other translator api both are different concept at all.

    • @electricindro2236
      @electricindro2236 ปีที่แล้ว

      @@TapanDubey Basically ngx-translate is glorified hashmap or switch case. 😪

    • @TapanDubey
      @TapanDubey  ปีที่แล้ว

      @@electricindro2236 it could be better version of switch case, just imagine similar code with switch it will not be as simple as this one because this is simply loosely coupled file for different languages.

  • @MuhammadHassan-yt2vv
    @MuhammadHassan-yt2vv ปีที่แล้ว

    i have dynamic data not static data like in json file, data may be change every time than how do this support