ng2-truncate

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

Angular-cli Integration

Add the following line to your angular-cli-build.js file

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'ng2-truncate/dist/**/*.+(js|js.map)',
      ...
    ]
  });
};

Click here to see an example.

Then you should update your system-config.ts to map ng2-truncate

const map: any = {
  'ng2-truncate': 'vendor/ng2-truncate/dist'
};

/** User packages configuration. */
const packages: any = {
  'ng2-truncate': {
    main: 'index'
  }
};

SystemJS

If you are using SystemJS by your own, you should update your config files like in this example.

Simple 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 { TRUNCATE_PIPES } from 'ng2-truncate';

@Component({
    selector: 'my-component',
    template: '<p>{{ "123456789" | truncate : 3 }}</p>',
    pipes: [TRUNCATE_PIPES]
})
export class MyComponent {

}

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 TRUNCATE_PIPES also enable truncating by words

import { Component } from '@angular/core';
import { TRUNCATE_PIPES } from 'ng2-truncate';

@Component({
    selector: 'my-component',
    template: '<p>{{ "1234 567 89" | words : 2 }}</p>',
    pipes: [TRUNCATE_PIPES]
})
export class MyComponent {

}

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