Ionic 3 lazy loading pipes

Question

While i use " | orderBy : ['id'];" in my template i was getting the following error. My project in Ionic 3 lazy loading.

To be able to help you we need the code that will handle that variable. — Ron Nabuurs, May 18 '18 at 14:00
As I was working on production build, it's quite difficult to place the code which used in the production build as its the restriction from my company. Also, the timeline for completing the task as at the same time. While searching not got any proper response too. that's why I posted with the error code, which will help those who have faced the same issue on ionic 3. — Jose G Varanam, May 21 '18 at 05:11

Christian Benseler · Answer 1 · 2018-05-18T16:45:11.557

1

Angular 2+ does not have the built-in orderBy, as Angular 1 has. You have to implement on your own and then add it to the providers' array from the modules where you will use it.

Official explanation from Angular doc:

Angular doesn't have a FilterPipe or an OrderByPipe for reasons explained in the Appendix of this page.

Angular doesn't provide pipes for filtering or sorting lists. Developers familiar with AngularJS know these as filter and orderBy. There are no equivalents in Angular.

This isn't an oversight. Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification. Both filter and orderBy require parameters that reference object properties. Earlier in this page, you learned that such pipes must be impure and that Angular calls impure pipes in almost every change-detection cycle.

edited May 18 '18 at 16:45

answered May 18 '18 at 14:27

Christian Benseler

7,907
8
40
71

I would like to know if angular2+ does not have the built-in orderBy then in my normal ionic 3 project (non lazy loading project) orderBy is working fine. – Jose G Varanam May 18 '18 at 15:28
Very strange, because Angular official doc explain that there is no orderBy built-in pipe (https://angular.io/guide/pipes#built-in-pipes) – Christian Benseler May 18 '18 at 16:44

score 0 · Answer 2 · answered May 18 '18 at 15:09

0

You should create a custom @Pipe:

Look at this question for resolve.

answered May 18 '18 at 15:09

Matteo Ponzo

47
1
3

score 0 · Answer 3 · answered May 18 '18 at 19:40

So yes in Angular 2+ you have to write / use 3rd party pipe and there is no "built in" orderBy as Christian pointed out. Once you have your pipe added to your project using it in your lazy loaded module is pretty simple:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FeedPage } from './feed.page';
import { TimeAgoPipe } from '../../pipes/time-ago.pipe';
import { ReversePipe } from '../../pipes/reverse.pipe';

@NgModule({
  declarations: [
    FeedPage,
    TimeAgoPipe,
    ReversePipe
  ],
  imports: [
     IonicPageModule.forChild(FeedPage),
  ]
})
export class FeedPageModule {}

And then inside your page (in this example my feedPage):

<ion-content>
  <ion-card *ngFor="let item of feedItems | async | reverse">
    <ion-item>
      <h2>{{ item.username }}</h2>
      <p>{{ item.updatedAt | timeAgo }}</p>
    </ion-item>
    <ion-card-content>
    </ion-card-content>
  </ion-card>
</ion-content>

Ionic 3 lazy loading pipes

3 Answers3