1.3.17 • Published 6 years ago

ng2-truncate v1.3.17

Weekly downloads
1,816
License
MIT
Repository
github
Last release
6 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

6 years ago

1.3.16

6 years ago

1.3.15

6 years ago

1.3.11

7 years ago

1.3.11-alpha.1

7 years ago

1.3.1-1.alpha.0

7 years ago

1.3.10

7 years ago

1.3.9

7 years ago

1.3.8

7 years ago

1.3.8-0

7 years ago

1.3.7

7 years ago

1.3.6

7 years ago

1.3.5

7 years ago

1.3.4

7 years ago

1.3.4-0

7 years ago

1.3.3

7 years ago

1.3.2

7 years ago

1.3.0-18

7 years ago

1.3.0-17

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.3.0-16

7 years ago

1.3.0-15

7 years ago

1.3.0-14

7 years ago

1.3.0-13

7 years ago

1.3.0-12

7 years ago

1.3.0-11

7 years ago

1.3.0-10

7 years ago

1.3.0-9

7 years ago

1.3.0-8

7 years ago

1.3.0-7

7 years ago

1.3.0-6

7 years ago

1.3.0-5

7 years ago

1.3.0-4

7 years ago

1.3.0-3

7 years ago

1.3.0-2

7 years ago

1.3.0-1

7 years ago

1.3.0-0

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

8 years ago

0.3.0

8 years ago

0.2.0

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago

0.0.10

8 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago