Substring with limitTo


#1

I want to limit the size of a string in the page, so I tried this:

  <ion-list inset>
    <ion-item *ngFor="let m of messages">
      {{m.subject}}
      {{m.content | limitTo:30}}
    </ion-item>
  </ion-list>

But it is giving this error:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
The pipe ‘limitTo’ could not be found ("

[ERROR ->] {{m.subject}} {{m.content | limitTo:30}} "): MessageListPage@18:41

#2

That error message sounds to me like you haven’t declared the limitTo pipe in the component that’s trying to use it.


#3

Angular 2 pipes were not working for me in Ionic 2. I had to include below script in index.html to get it working.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>


#4

create a pipe like ionic g pipes max and after paste this code
import { Injectable, Pipe } from ‘@angular/core’;

/*
Generated class for the Max pipe.

See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
Angular 2 Pipes.
*/
@Pipe({
name: ‘max’
})
@Injectable()
export class Max {
transform(val, args) {
if (val.length > 80){
return val.substring(0, 80)+’…’;
}else{
return val;
}
}
}

after this, import it in your page like :
import {Max} from ‘…/…/pipes/max’;
and make it like a pipes
pipes : [Max]
and in your html file
{{reponse.bio |max:80}}


#5

use slice ,limitTo does not work anymore

{{m.content | slice:0:30}}


#6

I want to add 3 dots after slicing text. like this: My long text …
What is the solution using slice?


#7

You’re right that’s the answer. Thanks :smiley: