Async Pipe used to sort a list, is called each time there is a mouse or keyboard event - Angular4

Question

<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?

Answer 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