Skip to content

Angular pipe for cutting translations βœ‚οΈ 🌍 (plugin for ngx-translate)

License

Notifications You must be signed in to change notification settings

bartholomej/ngx-translate-cut

Repository files navigation

βœ‚οΈπŸŒ NgxTranslateCut Pipe

npm version Package License Build & Publish NPM Downloads codecov

Angular pipe for cutting translations βœ‚οΈ 🌍 (plugin for @ngx-translate)

βœ“ Angular 18, Ivy, Angular Universal (SSR) 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

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

Choose the version corresponding to your Angular version:

Angular ngx-translate-cut Install
ng18 18.x npm install ngx-translate-cut
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
  1. Add NgxTranslateCutModule into your module imports.

File app.module.ts

  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

Separator

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: '*'
    }),
   ]
  })

Trim

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

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

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

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

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

License

Copyright Β© 2024 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.