ng2-truncate

This package has been moved to [@yellowspot/ng-truncate](https://www.npmjs.com/package/@yellowspot/ng-truncate)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2-truncate
4961.3.175 years ago7 years agoMinified + gzip package size for ng2-truncate in KB

Readme

Deprecation warning
This package has been moved to @yellowspot/ng-truncate
ng2-truncate
GitHub issues GitHub stars GitHub forks
This project is a Angular 4+ pipe to truncate text to a set of characters or words.

CI Status

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