✂️🌍 NgxTranslateCut Pipe


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

> ✓ _Angular 21, Angular Universal (SSR), Standalone, Signals and Zoneless compatible_

Here's the demo or stackblitz live preview

Install

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

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

``bash
npm install ngx-translate-cut
`

Choose the version corresponding to your Angular version:

| Angular | ngx-translate-cut | Install |
| ------------------- | ----------------- | ---------------------------------- |
| ng21 | 21.x | npm install ngx-translate-cut |
| ng20 | 20.x | npm install ngx-translate-cut@20 |
| ng19 | 19.x | npm install ngx-translate-cut@19 |
| ng18 | 18.x | npm install ngx-translate-cut@18 |
| ng17 | 17.x | npm install ngx-translate-cut@17 |
| ng16 | 5.x | npm install ngx-translate-cut@5 |
| ng15 | 4.x | npm install ngx-translate-cut@4 |
| ng14 | 3.x | npm install ngx-translate-cut@3 |
| ng13 | 3.x | npm install ngx-translate-cut@3 |
| ng12 (ivy only) | 2.x | npm install ngx-translate-cut@2 |
| >= 5 =< 12 | 1.x | npm install ngx-translate-cut@1 |

3. Add NgxTranslateCutModule into your module imports.

File app.module.ts

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

@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule
]
})
`

Usage

$3

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

File assets/i18n/en.json

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

$3

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

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

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

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

{{ 'demo' | translate | translateCut:3 }}
`

$3

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

Options

$3

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

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

@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule.forRoot({
// Your separator in translation strings will be *
separator: '*'
}),
]
})
`

$3

If you do not want to trim your translation strings before cutting you can set trim to false (default is true). See this explanation...

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

@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule.forRoot({
trim: false
}),
]
})
`

Dependencies

@ngx-translate/core

FAQ

$3

#### Error

> 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)

#### Solution

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

Install copmatibility version instead:

`bash
yarn add ngx-translate-cut@1 # for angular 5 – 11
`

Development (notes for me)

$3

`shell
yarn release:patch


yarn release:minor

yarn release:major

`

$3

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

License

Copyright © 2026 Lukas Bartak

Proudly powered by nature 🗻, wind 💨, films 🎥, books 📖, tea 🍵, chili 🌶 ️and beer 🍺 ;)

All contents are licensed under the [MIT license].

[mit license]: LICENSE

Donation

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.