1.3.17 • Published 8 years ago

ng2-truncate v1.3.17

Weekly downloads
1,816
License
MIT
Repository
github
Last release
8 years ago

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
1.3.17

8 years ago

1.3.16

8 years ago

1.3.15

8 years ago

1.3.11

8 years ago

1.3.11-alpha.1

8 years ago

1.3.1-1.alpha.0

8 years ago

1.3.10

8 years ago

1.3.9

9 years ago

1.3.8

9 years ago

1.3.8-0

9 years ago

1.3.7

9 years ago

1.3.6

9 years ago

1.3.5

9 years ago

1.3.4

9 years ago

1.3.4-0

9 years ago

1.3.3

9 years ago

1.3.2

9 years ago

1.3.0-18

9 years ago

1.3.0-17

9 years ago

1.3.1

9 years ago

1.3.0

9 years ago

1.3.0-16

9 years ago

1.3.0-15

9 years ago

1.3.0-14

9 years ago

1.3.0-13

9 years ago

1.3.0-12

9 years ago

1.3.0-11

9 years ago

1.3.0-10

9 years ago

1.3.0-9

9 years ago

1.3.0-8

9 years ago

1.3.0-7

9 years ago

1.3.0-6

9 years ago

1.3.0-5

9 years ago

1.3.0-4

9 years ago

1.3.0-3

9 years ago

1.3.0-2

9 years ago

1.3.0-1

9 years ago

1.3.0-0

9 years ago

1.2.0

9 years ago

1.1.0

9 years ago

1.0.0

9 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago