npm
ng-truncate
This project is a Angular 4+ pipe to truncate text to a set of characters or words.
CI Status
Installation
To install this library, run:
$ npm install @yellowspot/ng-truncate --saveUsage
<p>{{ "123456789" | truncate : 3 : '…' }}</p>Options as a hash
<p>{{ "123456789" | truncate : 3 : { trailingString: '…', countTrailing: true }}</p>Examples
By default, the pipe will truncate text after 40 characters. You could override this using the first argument:
import { Component } from '@angular/core';
import { TruncateModule } from '@yellowspot/ng-truncate';
@Component({
selector: 'my-component',
template: '<p>{{ "123456789" | truncate : 3 }}</p>'
})
export class MyComponent {
}
@NgModule({
imports: [ TruncateModule ],
declarations: [ MyComponent ]
})
export class MyApp { }This will produce the following html
<p>123…</p>There is a second argument which allow to override the suffix used:
@Component({
...
template: '<p>{{ "123456789" | truncate : 3 : "xxx" }}</p>',
...
})This will produce the following html
<p>123xxx</p>You can also truncate left side by using negative limit
@Component({
...
template: '<p>{{ "123456789" | truncate : -4 : "…" }}</p>',
...
})This will produce the following html
<p>…6789</p>Count trailing string as part of the limit
@Component({
...
template: '<p>{{ "123456789" | truncate : 3 : { trailingString: "…", countTrailing: true } }}</p>',
...
})This will produce the following html
<p>12…</p>Truncate by words
Using TruncateModule also enable truncating by words
import { Component } from '@angular/core';
import { TruncateModule } from '@yellowspot/ng-truncate';
@Component({
selector: 'my-component',
template: '<p>{{ "1234 567 89" | words : 2 }}</p>'
})
export class MyComponent {
}
@NgModule({
imports: [ TruncateModule ],
declarations: [ MyComponent ]
})
export class MyApp { }This will produce the following html
<p>1234 567…</p>This pipe has also a second parameter to override the suffix used
Demo
Check out the Live demo
...Or modify on Plunker here
...Or clone the demo app built using angular-cli: https://github.com/yellowspot/ng2-truncate-demo
Development
To generate all *.js, *.js.map and *.d.ts files:
$ npm run ng build @yellowspot/ng-truncateTo lint all *.ts files:
$ npm run ng lint @yellowspot/ng-truncateTo execute all test via via Karma:
$ npm run ng test @yellowspot/ng-truncatePublish:
$ npm run build-lib
$ cd dist/yellowspot/ng-truncate/
$ npm publish
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
![dependabot-preview[bot]](https://avatars.githubusercontent.com/u/27856297?size=120)
