{"id":26894,"library":"dfx-transloco-markup","title":"dfx-transloco-markup","description":"Angular component for rendering translations with markup as an extension for Transloco (v21, Angular 21+, Transloco 8). Fork of ngx-transloco-markup, providing a <transloco> component that supports inline HTML-like markup in translation strings without innerHTML or splitting translations. Ships TypeScript types, published in Angular Package Format. Release cadence aligns with Angular major versions. Key differentiators: extensible transpiler architecture, automatic context detection, no XSS risk compared to [innerHTML].","status":"active","version":"21.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Dafnik/dfx-common","tags":["javascript","ng","ngx","angular2","angular","transloco","markup","plugin","translation","typescript"],"install":[{"cmd":"npm install dfx-transloco-markup","lang":"bash","label":"npm"},{"cmd":"yarn add dfx-transloco-markup","lang":"bash","label":"yarn"},{"cmd":"pnpm add dfx-transloco-markup","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Angular common module dependency","package":"@angular/common","optional":false},{"reason":"Angular core dependency","package":"@angular/core","optional":false},{"reason":"Transloco core library required","package":"@jsverse/transloco","optional":false},{"reason":"Reactive extensions required by Angular","package":"rxjs","optional":false}],"imports":[{"note":"Named export, not default. Used as Angular component selector <transloco>.","wrong":"import TranslocoMarkupComponent from 'dfx-transloco-markup'","symbol":"TranslocoMarkupComponent","correct":"import { TranslocoMarkupComponent } from 'dfx-transloco-markup'"},{"note":"Module to import for Angular compatibility, typically in standalone or NgModule.","wrong":"import TranslocoMarkupModule from 'dfx-transloco-markup'","symbol":"TranslocoMarkupModule","correct":"import { TranslocoMarkupModule } from 'dfx-transloco-markup'"},{"note":"Function to provide markup transpilers in standalone Angular applications.","wrong":"import { provideTranslocoMarkup } from '@jsverse/transloco'","symbol":" provideTranslocoMarkup","correct":"import { provideTranslocoMarkup } from 'dfx-transloco-markup'"}],"quickstart":{"code":"import { Component } from '@angular/core';\nimport { TranslocoMarkupModule } from 'dfx-transloco-markup';\n\n// In your translation file (e.g., en.json):\n// { \"welcome\": \"Hello <b>{{name}}</b>!\" }\n\n@Component({\n  standalone: true,\n  imports: [TranslocoMarkupModule],\n  template: `\n    <transloco key=\"welcome\" [params]=\"{ name: username }\" />\n  `\n})\nexport class MyComponent {\n  username = 'Alice';\n}\n","lang":"typescript","description":"Basic usage of the <transloco> component with a translation key and parameter interpolation, including markup like <b>."},"warnings":[{"fix":"Upgrade to Angular 21 and Transloco 8. Use dfx-transloco-markup 21.x.","message":"Breaking changes in v21: Angular 21 required, Transloco 8 required. Older versions incompatible.","severity":"breaking","affected_versions":"<21.0.0"},{"fix":"Ensure @jsverse/transloco version matches ^8.0.0.","message":"Peer dependency on @jsverse/transloco 8.x. Version mismatch causes runtime errors.","severity":"breaking","affected_versions":">=21.0.0"},{"fix":"Use @jsverse/transloco 8.x and dfx-transloco-markup 21.x.","message":"Legacy Transloco versions (<5) are not supported. The library rebrands to @jsverse/transloco.","severity":"deprecated","affected_versions":"<0.0.2"},{"fix":"Add custom transpiler classes to the providers array.","message":"Custom transpilers must be provided via dependency injection or provideTranslocoMarkup(). Not configuring them leads to missing rendered markup.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure tags are properly closed and nested.","message":"The component uses a custom tokenizer sensitive to whitespace. malformed tags may be silently dropped.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Either import TranslocoMarkupModule in your standalone component's imports, or add it to your NgModule imports.","cause":"Missing import of TranslocoMarkupModule in standalone component or NgModule.","error":"NullInjectorError: No provider for TranslocoMarkupComponent!"},{"fix":"Add TranslocoRootModule or provideTransloco in your app configuration.","cause":"Transloco is not initialized before using the component.","error":"Error: Transloco must be configured before using dfx-transloco-markup"},{"fix":"Make sure the translation key exists and params is an object if used.","cause":"Translation key missing or params not passed correctly.","error":"TypeError: Cannot read properties of undefined (reading 'params')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}