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

Install

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

  @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 [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

License

Copyright © 2021 Lukas Bartak

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.

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