1
<div *ngFor="let student of mystudentsFiltered  | orderBy : ['-presence', 'unreadcount']>

In the above for template, I have used a pipe orderBy, which sorts the list, every time there is a status change of an item (student) in the list. Somehow, this pipe is being repeatedly called every time there is a mouse or keyboard event.

I researched more and found, pipe in Angular4 are executed every time there is a change detection. And Angular4 consider the following in the change detection mechanism as:

1) Events - click, submit, scroll,

2) XHR - Fetching data from a remote server

3) Timers - setTimeout(), setInterval()

How can I restrict the said pipe to be called on when there is a data change but not the default change detection events?

krlzlx
  • 5,752
  • 14
  • 47
  • 55
Pranav Aggarwal
  • 43
  • 8
  • You have change the `ChangeDetectionStrategy` as `onPush` like this `changeDetection: ChangeDetectionStrategy.OnPush` though it is not recommended way to doing it as it leads to poor performance – Rahul Singh Aug 14 '17 at 12:06
  • @RahulSingh this is the first time I see somebody saying that `onPush` leads to poor performance. Using `onPush` properly can greatly **boost** the app performance, you just need to have a good understanding of Angular's change detection mechanism. – im.pankratov Nov 13 '17 at 18:14
  • The performance is for using pipes for filtering . Pipes are not meant to be used as filters – Rahul Singh Nov 13 '17 at 18:16

1 Answers1

1

You shouldn't use order pipes or filter pipes. As you experienced yourself, this is bad for performance. You can read more about it here. You need to do the ordering in an service

Robin Dijkhof
  • 18,665
  • 11
  • 65
  • 116