24

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>
Improve this question
1
  • 2
    The limitTo is not available in Angular 2 as a common part, as seen in the API reference. You can however build your own pipe. Commented Oct 13, 2016 at 18:44

5 Answers 5

Reset to default
83

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Exactly what i needed!
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

Improve this answer

6 Comments

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"
Did you inject the pipe in you module 'declarations' ? i.e, @NgModule
Add pipe in the module not in the component.
I added it to NgModule, but keep getting in my component the following error: "The pipe 'limitTo' could not be found"
Check the pipe name is 'limitTo' or anything else. Please provide your pipe source code.
|
9

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

Improve this answer

Comments

2

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>
Improve this answer

Comments

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.
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.