Angular: limitTo pipe not working

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


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