README

✂️🌍 NgxTranslateCut Pipe

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

Install

Make sure you have @ngx-translate library installed, because this is its plugin
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 ngx-translate-cut@2`
>= 5 < 13	1.x	`npm install ngx-translate-cut@1`

Add NgxTranslateCutModule into your module imports (usually app.module.ts file)

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

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

Usage

Definition

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>

Result

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

Options

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';

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

Dependencies

@ngx-translate/core

FAQ

Older Angular

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 version (Angular 5 – 11).

Install copmatibility version instead:

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

Development (notes for me)

Publish Stable

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

Publish next channel

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

License

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

All contents are licensed under the MIT 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.

Usage no npm install needed!