✂️🌍 NgxTranslateCut Pipe

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

Make sure you have @ngx-translate library installed, because this is its plugin
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`

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

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

Feature request: Keeping spaces

I use this library for a while already and it works great but I need one additional feature. For this reason I created a fork but it feels ridiculous to maintain a fork for 1 tiny change.

The issue:

When I have a text that I want to cut to apply some additional HTML for example, the spaces are trimmed even though this is not desired.

E.g.
for the following HTML

<div>
  {{ 'translation' | translate | translateCut: 0 }}
  <a href="#">{{ 'translation' | translate | translateCut: 1 }}</a>
  {{ 'translation' | translate | translateCut: 2 }}  
</div>

"translation": "This is a |cut| sentence.",
will work fine since my HTML is responsible for placing the correct spaces.

However when my cut is at the end of a sentence like this
"translation": "This is a sentence that is |cut|.",
the HTML does not know whether a space is needed between the cuts so there will be either spaces on both sides of cut or none at all, neither is correct.

My fix

To fix this I made the following change to /projects/ngx-translate-cut/src/lib/ngx-translate-cut.pipe.ts (which could be optimised further)

-    const result = phrase ? phrase.trim() : '';
+    const result = phrase ? phrase : '';

This will keep the existing spaces from the original translation and just needs small adjustment to my html to work without any issues

<div>
  {{ 'translation' | translate | translateCut: 0 }}<a
    href="#">{{ 'translation' | translate | translateCut: 1 }}</a
  >{{ 'translation' | translate | translateCut: 2 }}  
</div>

If this is too much of a risk to just apply without it breaking for other users of this library it could become a configuration option in the forRoot implementation.
Personally I doubt that this change will break anything for other users since they are already responsible for the correct spaces in their HTML but it would help me a lot. Please consider my request.

bartholomej / ngx-translate-cut Goto Github PK

ngx-translate-cut's Introduction

✂️🌍 NgxTranslateCut Pipe

Install

Usage

Definition

Example code

Result

Options

Dependencies

FAQ

Older Angular

Error

Solution

Development (notes for me)

Publish Stable

Publish next channel

License

Donation

Thanks to

ngx-translate-cut's People

Contributors

Stargazers

Watchers

Forkers

ngx-translate-cut's Issues

The issue:

My fix

Recommend Projects

Recommend Topics

Recommend Org