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
-
Make sure you have @ngx-translate library installed, because this is its plugin
-
Use
npm
(oryarn
) 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 moduleimports
.
File app.module.ts
import { NgxTranslateCutModule } from 'ngx-translate-cut';
@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule
]
})
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"
}
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>
This is only one 'translate string' with strong text and links
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: '*'
}),
]
})
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)
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
yarn release:patch
# yarn release:minor
# yarn release:major
- Bump version
-next.0
inpackage.json
yarn publish:next
Copyright ยฉ 2023 Lukas Bartak
Proudly powered by nature ๐ป, wind ๐จ, tea ๐ต and beer ๐บ ;)
All contents are licensed under the MIT license.
If this project have helped you save time please consider making a donation for some ๐บ or ๐ต ;)
Original idea comes from: @yuristsepaniuk in this thread.