# ThingsBoard Translation

>[!Note]
>本文主要目的在說明如何使用 ThingsBoard 的翻譯功能
>以及 ThingsBoard 的翻譯方式是採用 `ngx-translate/core`

## Translation in ThingsBoard custom widget
* 使用 [ngx-translate/core](https://github.com/ngx-translate/core#api)
* 吃的到 ThingsBoard Community Edition src 中 json 檔的設定

<div>{{ 'account.notification-settings' | translate }}</div>
<!-- return Notification settings -->

//json file
//ui-ngx\src\assets\locale\locale.constant-en_US.json
{
    ...
    "account": {
        "account": "Account",
        "notification-settings": "Notification settings"
    },
    ...
}

<br/>

## Translation in ThingsBoard Professional Edition
* TB PE -> white-labelling -> custom language (json setting)

          {
            "custom": {
              "humidity":{
                "title": "濕度"
               }
             }
            }

* Use `{i18n:custom.humidity.title}` in ThingsBoard built-in html widgets
* Use `{{ 'custom.humidity.title' | translate }}` in the custom widgets

<br/>

## Use custom widget to test ngx-translate
* 自建的 chatbot html 吃不到 {i18n:account.notification-settings} 設定

* `self.ctx.translate`
* Use ngx-translate translateservice
* 可以透過 ngx 的 api 來獲取對應 key 的 value 值然後再存進變數中來替換

    //translate chatbot hello when language setting is changed
    self.ctx.translate.get(['custom.chatbot.hello'])
      .subscribe(translations => {
        hello = translations['custom.chatbot.hello'];
      });

    //pe custom json setting in zh-TW
    {
        "custom": {
          "chatbot":{
            "hello": "你需要幫忙嗎?"
           }
         }
    }


<br/>
    
## Reference
[ngx-translate/core](https://github.com/ngx-translate/core#ngx-translatecore--)
[如何在 Angular 中使用 ngx-translate](https://www.gingerdoc.com/tutorials/angular-ngx-translate)
[i18n 多國語系 - Ngx-Translate](https://ithelp.ithome.com.tw/articles/10299595)
[Angular 多國語系 NGX-Translate](https://medium.com/allen%E7%9A%84%E6%8A%80%E8%A1%93%E7%AD%86%E8%A8%98/angular-ngx-translate-%E7%AD%86%E8%A8%98-84b8812419ab)