Registry / web-framework / ngx-transloco-markup

ngx-transloco-markup

library6.0.2jsnpmunverified

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.

web-framework

npm install ngx-transloco-markup

github ↗package ↗

INSTALL

IMPORT

SIG · NGX-TRANSLOCO-MARK

ngx-transloco-markup

web-frameworkjavascriptv6.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TranslocoMarkupComponent

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

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

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

provideTranslocoMarkup

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

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

ESM-only; CJS require not supported.

BoldTranspiler

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

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

Transpilers are re-exported from the main module.

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>!" }

Debug

Known issues

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

fix

Update Angular to version 17+.

affects: >=6.0.0

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

fix

Upgrade Transloco to v7.

affects: >=6.0.0

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

fix

Use provideTranslocoMarkup() without arguments.

affects: >=5.0.0 <6.0.0

gotchaMarkup 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.

affects: >=1.0.0

gotchaThe <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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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.

NullInjectorError: No provider for TranslocoMarkupConfig!

Missing configuration provider for ngx-transloco-markup.

fix

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

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

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

fix

Upgrade @jsverse/transloco to ^7.

Upgrade

Version history

6.0.2latest on npm

Audit

Dependencies

@angular/corerequiredrequired peer dependency for Angular components

@jsverse/translocorequiredrequired peer dependency for translation functionality

rxjsrequiredrequired peer dependency for observables

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/dscheerens/ngx-transloco-markup ↗

packagehttps://www.npmjs.com/package/ngx-transloco-markup ↗