This project is a Angular 4+ pipe to truncate text to a set of characters or words.
To install this library, run:
$ npm install @yellowspot/ng-truncate --save<p>{{ "123456789" | truncate : 3 : '…' }}</p>Options as a hash
<p>{{ "123456789" | truncate : 3 : { trailingString: '…', countTrailing: true }}</p>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>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
Check out the Live demo
...Or modify on CodeSanbox here
...Or clone the demo app built using angular-cli: https://github.com/yellowspot/ng2-truncate-demo
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-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent