Angular: limitTo pipe not working

Question

I am trying to run limitTo pipe on Angular2 on a string:

{{ item.description | limitTo : 20 }}

And I get the following error:

The pipe 'limitTo' could not be found

Is it possible that this pipe was removed in Angular2?

This is my app.module

import { TruncatePipe } from './limit-to.pipe';

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: GridComponent
      },
    ])
  ],
  declarations: [ 
    AppComponent, 
    TopNavComponent, 
    GridComponent,
    TruncatePipe
  ],
  providers: [
    PinService,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

My grid component that is using the pipe:

import { Component,OnInit } from '@angular/core';
import { Router }   from '@angular/router';

@Component({    
    moduleId : module.id,
    selector: 'my-grid',    
    templateUrl : 'grid.component.html',
    styleUrls: [ 'grid.component.css']
})

export class GridComponent  implements OnInit{


    constructor(
        private router: Router,
        private gridService: GridService) {
    }

    ngOnInit(): void {
    }
}

My Pipe definition:

import { PipeTransform, Pipe  } from '@angular/core';

@Pipe({
  name: 'limitToPipe'
})
export class TruncatePipe implements PipeTransform {

  transform(value: string, limit: number) : string {

    let trail = '...';

    return value.length > limit ? value.substring(0, limit) + trail : value;
  }

}

And finally my template:

<div *ngFor="let item of items" class="grid-item">
  <p class="simple-item-description">
    {{ item.description | limitToPipe :  20 }} 
  </p>                
</div>

The `limitTo` is not available in Angular 2 as a common part, as seen [in the API reference](https://angular.io/docs/ts/latest/api/#!?apiFilter=pipe&query=pipe). You can however build your own pipe. — Roy, Oct 13 '16 at 18:44

score 80 · Answer 1 · answered Feb 14 '17 at 10:06

In order to answer to your question if it was removed: yes and no. limitTo seems to be removed, but there is a slice pipe which basically does the same as limitTo and can be used on strings aswell as on lists. It also gives you the oppurtunity to start your limitation at a given start index, which is neat.

In your case a simple {{ item.description | slice:0:20 }} would be enough. Unless you want to gain more experience writing your own pipe, which I even encourage ;)

Source and Documentation: https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

Exactly what i needed! – Rafique Mohammed Jun 15 '18 at 18:15 — Rafique Mohammed, Jun 15 '18 at 18:15

Libu Mathew · Accepted Answer · 2016-10-13T19:26:09.887

27

First you need to create a pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'limitTo'
})
export class TruncatePipe {
  transform(value: string, args: string) : string {
    // let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
    // let trail = args.length > 1 ? args[1] : '...';
    let limit = args ? parseInt(args, 10) : 10;
    let trail = '...';

    return value.length > limit ? value.substring(0, limit) + trail : value;
  }
}

Add the pipe in the module.ts file

import { NgModule }      from '@angular/core';
import {  TruncatePipe }   from './app.pipe';

@NgModule({
  imports:      [
  ],
  declarations: [
    TruncatePipe
  ],
  exports: [ 
  ]
})

export class AppModule { }

Then use the pipe in the binding code:

{{ item.description | limitTo : 20 }}

Demo plunker

edited Oct 13 '16 at 19:26

answered Oct 13 '16 at 18:39

Libu Mathew

2,976
23
30

I tried that, and I keep getting: " [ts] Argument of type '{ moduleId: string; selector: string; templateUrl: string; pipes: typeof TruncatePipe[]; styleUrl...' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'. import TruncatePipe" – Yuvals Oct 13 '16 at 18:52
Did you inject the pipe in you module 'declarations' ? i.e, @NgModule – Libu Mathew Oct 13 '16 at 18:54
Add pipe in the module not in the component. – Libu Mathew Oct 13 '16 at 18:57
I added it to NgModule, but keep getting in my component the following error: "The pipe 'limitTo' could not be found" – Yuvals Oct 13 '16 at 19:10
Check the pipe name is 'limitTo' or anything else. Please provide your pipe source code. – Libu Mathew Oct 13 '16 at 19:13
first - thank you very much for your help. It appears that the problem is that my pipe was not reloaded by the watch process.. extremely weird – Yuvals Oct 13 '16 at 19:33

score 8 · Answer 3 · answered Oct 15 '19 at 06:40

8

I added this code to make more sense

{{ item.description | slice:0:20 }}{{ item.description.length > 20 ? '....read more' : '' }}

to show that the data is sliced and contains more data that is hidden

answered Oct 15 '19 at 06:40

Akhil

368
4
16

Frank Nguyen · Answer 4 · 2017-07-13T06:18:16.807

You can use ng2-truncate instead

It has more options such as: truncate by words, truncate by characters, truncate left side (...abc)....

$ npm install ng2-truncate --save

Declarations

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 { }

Component

@Component({
    ...
    template: '<p>{{ "123456789" | truncate : 3 : "..." }}</p>',
    ...
})

Result:

<p>123...</p>

score 1 · Answer 5 · answered Mar 12 '20 at 06:02

1

Simple soultion for limit the records

<li *ngFor="let item of _source| slice:0:3; let ind=index;">
   {{item.description}}
</li> 


Here slice:0:3 --> 3 is the 3 records length means only first three records will be displayed.

answered Mar 12 '20 at 06:02

Shashwat Gupta

5,071
41
33

Angular: limitTo pipe not working

Is it possible that this pipe was removed in Angular2?

5 Answers5

Linked