Awesome Open Source
Awesome Open Source

✂️🌍 NgxTranslateCut Pipe

npm version Package License Build & Publish NPM Downloads codecov

Angular pipe for cutting translations ✂️ 🌍 (plugin for @ngx-translate)

Angular 13, Ivy and Angular Universal (SSR) compatible

Here's the demo or stackblitz live preview


  1. Make sure you have @ngx-translate library installed, because this is its plugin

  2. Use yarn (or npm) to install the package

npm install ngx-translate-cut # For Angular 13. See compatibility table.

Choose the version corresponding to your Angular version:

Angular ngx-translate-cut Install
13 (ivy only) 3.x npm install ngx-translate-cut
12 (ivy only) 2.x npm install [email protected]
>= 5 < 13 1.x npm install [email protected]
  1. Add NgxTranslateCutModule into your module imports (usually app.module.ts file)
  import { NgxTranslateCutModule } from 'ngx-translate-cut';

   // ...
   imports: [
     // ...



Strings are separated with | (pipe sign) ...but you can choose your own symbol

File assets/i18n/en.json

  "demo": "This is only one 'translate string' with | strong text | and | links"

Example code

In your template use translateCut:<number> pipe right after translate pipe from @ngx-translate library.

{{ 'demo' | translate | translateCut:0 }}

<strong> {{ 'demo' | translate | translateCut:1 }} </strong>

{{ 'demo' | translate | translateCut:2 }}

<a href="#"> {{ 'demo' | translate | translateCut:3 }} </a>


This is only one 'translate string' with strong text and links


If you are not satisfied with the basic settings of the separator (which is |), you can choose your own separator

  import { NgxTranslateCutModule } from 'ngx-translate-cut';

   // ...
   imports: [
     // ...
      // Your separator in translation strings will be `*`
      separator: '*'




Older Angular


Failed to compile.

./node_modules/ngx-translate-cut/fesm2015/ngx-translate-cut.mjs 17:18-28 Can't import the named export 'Injectable' from non EcmaScript module (only default export is available)


You are probably trying to use this library with an older version of Angular version (Angular 5 – 11).

Install copmatibility version instead:

yarn add [email protected] # for angular 5 – 11

Development (notes for me)

Publish Stable

yarn release:patch
# yarn release:minor
# yarn release:major

Publish next channel

  1. Bump version -next.0 in package.json
  2. yarn publish:next


Copyright © 2021 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under the MIT license.


If this project have helped you save time please consider making a donation for some 🍺 or 🍵 ;)

Thanks to

Original idea comes from: @yuristsepaniuk in this thread.

Alternatives To Ngx Translate Cut
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (245,128
Angular (54,865
Language (30,063
Translation (13,574
Localization (5,323
Translate (5,101
I18n (4,835
Pipe (4,600
Internationalization (3,328
Ngx (2,531
Angular9 (266
Angular10 (122
Ngx Translate (43
Ng8 (4
Ng9 (4