Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Translations with directive with "raw" content of element as a key doesn't work in Angular 9

See original GitHub issue

Hi! I’m trying to add translations to the new Angular9 app, but I’ve got strange behaviour with translate directive. While all of these work fine:

<div>{{'MENU.INTEGRATION' | translate}}</div>
<div [translate]="'MENU.INTEGRATION'"></div>
<div translate>{{'MENU.INTEGRATION'}}</div>

I cannot get translation for

<div translate>MENU.INTEGRATION</div>

There is no error in the console, as if the translation doesn’t work and the raw key is shown.

I’m using @ngx-translate/core: ^11.0.1, and Angular 9.0.0-rc.7 Here is some configuration info:

// package.json
{
  "dependencies": {
    "@angular/animations": "~9.0.0-rc.7",
    "@angular/common": "~9.0.0-rc.7",
    "@angular/compiler": "~9.0.0-rc.7",
    "@angular/core": "~9.0.0-rc.7",
    "@angular/forms": "~9.0.0-rc.7",
    "@angular/platform-browser": "~9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.7",
    "@ngx-translate/core": "^11.0.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.7",
    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.7",
    "@angular/cli": "~9.0.0-rc.7",
    "@angular/compiler-cli": "~9.0.0-rc.7",
    "@angular/language-service": "~9.0.0-rc.7",
    "codelyzer": "^5.1.2",
    "ng-packagr": "^9.0.0-rc.3",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.6.4"
  }
}

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@core/*": ["projects/core/src/lib/*"],
      "components": [
        "dist/components"
      ],
      "components/*": [
        "dist/components/*"
      ]
    },
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Issue Analytics

State:
Created 4 years ago
Comments:6

Top GitHub Comments

1reaction

MightGodcommented, May 14, 2020

I have 12.1.2 of ngx-translate and Angular 9 version, and directive translate not working for me when I dynamically change the key…

  {{getTranslateKeyThatChangedByCondition()}} 

  {{getTranslateKeyThatChangedByCondition() | translate}} 

getTranslateKeyThatChangedByCondition(): string { return (condition) ? 'KeyA' : 'KeyB'; }

It was working in Angular 8 and ngx-translate 11.0.1

1reaction

tonivj5commented, Feb 13, 2020

it works with 12.1.1 👍

Top Results From Across the Web

How to handle strings containing HTML using Angular ...

I know i can use ng-html-bind-unsafe but it is not helping. Not working: ...

Create dynamic translations with HTML & Components in ...

We'll build an Angular Component that lets you inject any HTML and even Angular Components and Directives into your translations.

Angular I18n: How to Internationalize with ngx-translate | Phrase

We have used the translate directive to fetch the translation values for the required error message for all the fields. The translation key...

Directives to the Point: Manipulating the DOM with Angular

A tutorial on how to use directives to customize your Angular application and control the DOM.

Angular ng-content and Content Projection: A Complete Guide ...

The Key Problem With The Initial Design; Designing the Same Component Using Content Projection; How To apply styles to elements projected via ng ......