ngx-transloco-markup

6.0.2 verified Fri May 01 auth: no javascript

An extension for Transloco that provides a <transloco> component for rendering translations with markup. Current stable version 6.0.2 works with Angular >=17 and @jsverse/transloco ^7. Released periodically, with major versions aligned with Angular major versions. Key differentiator: avoids splitting translations or using [innerHtml] for inline markup like links and bold text, reducing injection risks.

Common errors

error Error: Unexpected value 'TranslocoMarkupComponent' imported by the module 'AppModule'. Please add a @NgModule annotation. ↓

cause Importing TranslocoMarkupComponent into a non-standalone module without proper Angular module setup.

fix

If using NgModule, add TranslocoMarkupModule (if exists) instead. For new projects, use standalone components.

error NullInjectorError: No provider for TranslocoMarkupConfig! ↓

cause Missing configuration provider for ngx-transloco-markup.

fix

Call provideTranslocoMarkup() in your application config or add TranslocoMarkupModule.forRoot() in your root module.

error TypeError: Cannot read properties of undefined (reading 'pipe') ↓

cause Using an old version of Transloco (v6 or earlier) with ngx-transloco-markup v6.

fix

Upgrade @jsverse/transloco to ^7.

Warnings

breaking Upgrade to Angular >=17: ngx-transloco-markup v6.0.0+ requires Angular 17 or newer. ↓

fix Update Angular to version 17+.

breaking Transloco v7 migration: @jsverse/transloco ^7 is required. Older @ngneat/transloco versions are incompatible. ↓

fix Upgrade Transloco to v7.

deprecated provideTranslocoMarkup() with providerFn signature deprecated in v5; use the functional variant. ↓

fix Use provideTranslocoMarkup() without arguments.

gotcha Markup transpilers must be injected via the 'translateMarkup' injection token; forgetting to provide them will cause no markup rendering. ↓

fix Ensure you import or provide necessary transpilers (e.g., BoldTranspiler) in your module or component.

gotcha The <transloco> component only processes markup in the translation value; HTML attributes and tags from other sources are not sanitized separately. ↓

fix Avoid passing untrusted translation keys; the component does not sanitize arbitrary HTML.

Install

npm install ngx-transloco-markup

yarn add ngx-transloco-markup

pnpm add ngx-transloco-markup

Imports

TranslocoMarkupComponent

wrong

import { TranslocoMarkupComponent } from 'ngx-transloco-markup/component';

correct

import { TranslocoMarkupComponent } from 'ngx-transloco-markup';

ESM-only package. Component is exported from the main entry point.

provideTranslocoMarkup

wrong

const { provideTranslocoMarkup } = require('ngx-transloco-markup');

correct

import { provideTranslocoMarkup } from 'ngx-transloco-markup';

ESM-only; CJS require not supported.

BoldTranspiler

wrong

import { BoldTranspiler } from 'ngx-transloco-markup/transpilers';

correct

import { BoldTranspiler } from 'ngx-transloco-markup';

Transpilers are re-exported from the main module.

Quickstart

Shows how to use the <transloco> component in a standalone Angular component with a translated string containing bold markup.

import { Component } from '@angular/core';
import { TranslocoMarkupComponent } from 'ngx-transloco-markup';
import { TranslocoModule } from '@jsverse/transloco';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslocoModule, TranslocoMarkupComponent],
  template: `<transloco key="welcome" [params]="{ name: 'John' }"></transloco>`
})
export class AppComponent {}

// Translation JSON: { "welcome": "Hello <b>{{name}}</b>!" }