Skip to content
Angular 2 truncate pipe
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
e2e Copy files from new project Mar 4, 2019
projects/yellowspot/ng-truncate
src
.editorconfig
.gitignore
.nvmrc
README.md
angular.json
browserslist
package-lock.json
package.json
tsconfig.json Run ng update Sep 28, 2019
tslint.json

README.md

npm

@yellowspot/ng-truncate

ng-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 @yellowspot/ng-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 '@yellowspot/ng-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 '@yellowspot/ng-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:

$ ng build @yellowspot/ng-truncate

To lint all *.ts files:

$ ng lint @yellowspot/ng-truncate

To execute all test via via Karma:

$ ng test @yellowspot/ng-truncate
You can’t perform that action at this time.