@yellowspot/ng-truncate

npm

@yellowspot/ng-truncate

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 --save

Usage

<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-truncate

To lint all *.ts files:

$ npm run ng lint @yellowspot/ng-truncate

To execute all test via via Karma:

$ npm run ng test @yellowspot/ng-truncate

Publish:

$ npm run ng build @yellowspot/ng-truncate
$ cd dist/yellowspot/ng-truncate/
$ npm publish