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> 

Answer 1

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

Answer 2

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