{"id":25994,"library":"ngx-transloco-markup","title":"ngx-transloco-markup","description":"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.","status":"active","version":"6.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/dscheerens/ngx-transloco-markup","tags":["javascript","angular","ngx","transloco","markup","plugin","translation","translate","i18n","typescript"],"install":[{"cmd":"npm install ngx-transloco-markup","lang":"bash","label":"npm"},{"cmd":"yarn add ngx-transloco-markup","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngx-transloco-markup","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required peer dependency for Angular components","package":"@angular/core","optional":false},{"reason":"required peer dependency for translation functionality","package":"@jsverse/transloco","optional":false},{"reason":"required peer dependency for observables","package":"rxjs","optional":false}],"imports":[{"note":"ESM-only package. Component is exported from the main entry point.","wrong":"import { TranslocoMarkupComponent } from 'ngx-transloco-markup/component';","symbol":"TranslocoMarkupComponent","correct":"import { TranslocoMarkupComponent } from 'ngx-transloco-markup';"},{"note":"ESM-only; CJS require not supported.","wrong":"const { provideTranslocoMarkup } = require('ngx-transloco-markup');","symbol":"provideTranslocoMarkup","correct":"import { provideTranslocoMarkup } from 'ngx-transloco-markup';"},{"note":"Transpilers are re-exported from the main module.","wrong":"import { BoldTranspiler } from 'ngx-transloco-markup/transpilers';","symbol":"BoldTranspiler","correct":"import { BoldTranspiler } from 'ngx-transloco-markup';"}],"quickstart":{"code":"import { Component } from '@angular/core';\nimport { TranslocoMarkupComponent } from 'ngx-transloco-markup';\nimport { TranslocoModule } from '@jsverse/transloco';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [TranslocoModule, TranslocoMarkupComponent],\n  template: `<transloco key=\"welcome\" [params]=\"{ name: 'John' }\"></transloco>`\n})\nexport class AppComponent {}\n\n// Translation JSON: { \"welcome\": \"Hello <b>{{name}}</b>!\" }","lang":"typescript","description":"Shows how to use the <transloco> component in a standalone Angular component with a translated string containing bold markup."},"warnings":[{"fix":"Update Angular to version 17+.","message":"Upgrade to Angular >=17: ngx-transloco-markup v6.0.0+ requires Angular 17 or newer.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Upgrade Transloco to v7.","message":"Transloco v7 migration: @jsverse/transloco ^7 is required. Older @ngneat/transloco versions are incompatible.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Use provideTranslocoMarkup() without arguments.","message":"provideTranslocoMarkup() with providerFn signature deprecated in v5; use the functional variant.","severity":"deprecated","affected_versions":">=5.0.0 <6.0.0"},{"fix":"Ensure you import or provide necessary transpilers (e.g., BoldTranspiler) in your module or component.","message":"Markup transpilers must be injected via the 'translateMarkup' injection token; forgetting to provide them will cause no markup rendering.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid passing untrusted translation keys; the component does not sanitize arbitrary HTML.","message":"The <transloco> component only processes markup in the translation value; HTML attributes and tags from other sources are not sanitized separately.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"If using NgModule, add TranslocoMarkupModule (if exists) instead. For new projects, use standalone components.","cause":"Importing TranslocoMarkupComponent into a non-standalone module without proper Angular module setup.","error":"Error: Unexpected value 'TranslocoMarkupComponent' imported by the module 'AppModule'. Please add a @NgModule annotation."},{"fix":"Call provideTranslocoMarkup() in your application config or add TranslocoMarkupModule.forRoot() in your root module.","cause":"Missing configuration provider for ngx-transloco-markup.","error":"NullInjectorError: No provider for TranslocoMarkupConfig!"},{"fix":"Upgrade @jsverse/transloco to ^7.","cause":"Using an old version of Transloco (v6 or earlier) with ngx-transloco-markup v6.","error":"TypeError: Cannot read properties of undefined (reading 'pipe')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}