TS file in Angular app: how to translate text from toastlify with i18next & angular-i18next?

Question

I've got all my application running with i18next and angular-i18next for internationalization. I would like to translate a pop up using angular-toastify but the code that must be translated is into a ts.file ?

How I can do the | i18next translation ?

Here is my package.lock and below the code that i would like to translate :

    "@angular/animations": "~10.1.6",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/forms": "~10.1.6",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "angular-i18next": "^10.3.0",
    "angular-toastify": "^1.0.4",
    "component": "^1.1.0",
    "i18next": "^21.6.10",
    "i18next-browser-languagedetector": "^6.1.3",
    "i18next-http-backend": "^1.3.2",
    "mat-select-filter": "^2.3.7",
    "mat-table-filter": "^9.1.0",
    "ng-i18next": "^1.0.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.7",
    "@angular/compiler-cli": "~10.1.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2",
    "video.js": "^7.10.2"
  }

go.ts file is the following

    if (state === true)
      this._toastService.success("Let's gooo");
    else {
      this._toastService.warn("warning - must be checked");
    }

thank u

Answer 1

Try something like this:

import { I18NextPipe } from 'angular-i18next';
...
constructor(
   ...
   private i18nextPipe: I18NextPipe,
   ...
) {...}


  if (state === true) {
    const translatedText = this.i18nextPipe.transform("Let's gooo");
    this._toastService.success(translatedText);
  } else {
    const translatedText = this.i18nextPipe.transform("warning - must be checked");
    this._toastService.warn(translatedText);
    }