Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bartholomej/ngx-translate-cut
Angular pipe for cutting translations ✂️ 🌍 (plugin for ngx-translate)
https://github.com/bartholomej/ngx-translate-cut
angular angular10 angular14 angular15 angular9 i18n internationalization languages localization ng10 ng14 ng15 ng8 ng9 ngx ngx-translate translate translations
Last synced: 19 days ago
JSON representation
Angular pipe for cutting translations ✂️ 🌍 (plugin for ngx-translate)
- Host: GitHub
- URL: https://github.com/bartholomej/ngx-translate-cut
- Owner: bartholomej
- License: mit
- Created: 2020-01-31T11:22:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T01:43:41.000Z (about 2 months ago)
- Last Synced: 2024-10-11T12:46:06.757Z (about 1 month ago)
- Topics: angular, angular10, angular14, angular15, angular9, i18n, internationalization, languages, localization, ng10, ng14, ng15, ng8, ng9, ngx, ngx-translate, translate, translations
- Language: TypeScript
- Homepage: https://bartholomej.github.io/ngx-translate-cut/
- Size: 4.79 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ✂️🌍 NgxTranslateCut Pipe
[](https://badge.fury.io/js/ngx-translate-cut)
[](https://www.npmjs.com/ngx-translate-cut)
[](https://github.com/bartholomej/ngx-translate-cut/actions)
[](https://www.npmjs.com/ngx-translate-cut)
[](https://codecov.io/gh/bartholomej/ngx-translate-cut)
> Angular pipe for cutting translations ✂️ 🌍 (plugin for [@ngx-translate](https://github.com/ngx-translate/core))
> ✓ _Angular 18, Ivy, Angular Universal (SSR) and Zoneless compatible_
Here's the [demo](http://bartholomej.github.io/ngx-translate-cut/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-translate-cut)
## Install
1. Make sure you have [@ngx-translate](https://github.com/ngx-translate/core) library installed, because this is its plugin
2. Use `npm` (or `yarn`) to install the package
```bash
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` |
3. Add `NgxTranslateCutModule` into your module `imports`.
File `app.module.ts`
```typescript
import { NgxTranslateCutModule } from 'ngx-translate-cut';
@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule
]
})
```
## Usage
### Definition
Strings are separated with `|` _(pipe sign)_
_[...but you can choose your own symbol](#options)_
File `assets/i18n/en.json`
```json
{
"demo": "This is only one 'translate string' with | strong text | and | links"
}
```
### Example code
In your template use `translateCut:` pipe right after `translate` pipe from [@ngx-translate](https://github.com/ngx-translate/core) library.
```html
{{ 'demo' | translate | translateCut:0 }}
{{ 'demo' | translate | translateCut:1 }}
{{ 'demo' | translate | translateCut:2 }}
{{ 'demo' | translate | translateCut:3 }}
```
### Result
> This is only one 'translate string' with strong text and [links](https://github.com/bartholomej/ngx-translate-cut/)
## Options
### Separator
If you are not satisfied with the basic settings of the separator (which is `|`), you can choose your own separator
```typescript
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](https://github.com/bartholomej/ngx-translate-cut/issues/62)...
```typescript
import { NgxTranslateCutModule } from 'ngx-translate-cut';
@NgModule({
// ...
imports: [
// ...
NgxTranslateCutModule.forRoot({
trim: false
}),
]
})
```
## Dependencies
[@ngx-translate/core](https://github.com/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:
```bash
yarn add ngx-translate-cut@1 # for angular 5 – 11
```
## Development (notes for me)
### Publish Stable
```shell
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](http://bartweb.cz)
Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
All contents are licensed under the [MIT license].
[mit license]: LICENSE
## Donation
If this project have helped you save time please consider [making a donation](https://github.com/sponsors/bartholomej) for some 🍺 or 🍵 ;)
## Thanks to
Original idea comes from: [@yuristsepaniuk](https://github.com/yuristsepaniuk) in [this thread](https://github.com/ngx-translate/core/issues/223).