itsnotvalid/ng2-truncate

Angular 2 truncate pipe

ng2-truncate

This project is a Angular 2 pipe to truncate text to a set of characters or words.

CI Status

Installation

To install this library, run:

$ npm install ng2-truncate --save

Example

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 'ng2-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>

Truncate by words

Using TruncateModule also enable truncating by words

import { Component } from '@angular/core';
import { TruncateModule } from 'ng2-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 tsc

To lint all *.ts files:

$ npm run lint

To execute all test via via Karma:

$ npm run test