Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

Question

Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

Filtering and sorting operations can be resource-intensive. When Angular invokes these pipe methods frequently, it can lead to a degraded user experience, especially with even moderately-sized lists. Misuse of filter and orderBy in AngularJS apps has resulted in complaints about the performance of Angular itself.

I initially implemented filter, order, and search pipes in my application and didn't face any performance issues. However, lately, they have started causing some problems.

In my application, I have something similar to this setup:

component.html

<ul>
  <li *ngFor="let user of users | filter: filters | order: order | search: searchTerm"></li>
</ul>

component.ts

users = [
  {
    firstName: "Steve", 
    lastName: "Smith", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff8b9a8c8bbf8b9a8c8bd19c9092">[email protected]</a>", 
    id: 102, 
    tags: [
      'newUser',
      'important',
      'funny'
    ]
  },
  // More user data...
];

While the current implementation is functional, I understand that it may not be performing optimally.

The respective filter.pipe.ts and order.pipe.ts files contain logic for filtering and ordering users based on various criteria, which is currently being applied as chained pipes.

My plan is to refactor these pipes into functions, but I am unsure about the best way to chain them effectively while maintaining the same functionality.

One approach I'm considering involves chaining the functions like this:

private USERS: Users = [ ... ];
public users: Users;
this.users = this.search(this.order(this.filter(this.USERS, filters), order), searchTerm);

Is this method the most efficient solution?

angular typescript

Answer 1

Answer №1

Whenever a parameter is modified, the entire sequence of pipes needs to be executed. To prevent this issue, it's best to separate your pipes.

<ng-container *ngIf="users | filter: filters as filtered">
   <ng-container *ngIf="filtered | order: order as ordered">
      <ng-container *ngIf="ordered | search: searchTerm as searched">
         <li *ngFor="let user of searched"></li>
      </ng-container>
   </ng-container>
 </ng-container>

Only the relevant <ng-container> will be refreshed when either the order or searchTerm parameters change. The key requirement here is that all conditions must return a truthy value for the *ngIf="xxx as yyy" statement to function correctly. Your example should work fine in this case.

Answer 2

Whenever a parameter is modified, the entire sequence of pipes needs to be executed. To prevent this issue, it's best to separate your pipes.

<ng-container *ngIf="users | filter: filters as filtered">
   <ng-container *ngIf="filtered | order: order as ordered">
      <ng-container *ngIf="ordered | search: searchTerm as searched">
         <li *ngFor="let user of searched"></li>
      </ng-container>
   </ng-container>
 </ng-container>

Only the relevant <ng-container> will be refreshed when either the order or searchTerm parameters change. The key requirement here is that all conditions must return a truthy value for the *ngIf="xxx as yyy" statement to function correctly. Your example should work fine in this case.

Answer 3

Answer №2

In my quest for a solution, I delved into some research and formulated the following approach

I eliminated the pipes from the equation and devised a utility class that links all the functions together to produce the desired result

sort-users.ts

export class SortUsers {
   private _users: Users[];

   constructor(@Optional() users: Users[]) {
     this._users = users;
   }

   private search() {
     // ...
     return this;
   }

   private filter() {
     // ...
     return this;
   }

   private order() {
     // ...
     return this
   }

   public sort(users, searchTerm, filters, order) {
      const sort = new SortUsers(users);
      return sort
        .search(searchTerm)
        .filter(filters)
        .order(order)
   }
}

Subsequently, within my component

private USERS: Users[];
users: Users[]

// ...

constructor(
  private _sort: SortUsers
) {}

// ...

sortUsers() {
   // ...
   this.users = this._sort(this.USERS, this.searchTerm, this.filters, this.order);
}

Answer 4

In my quest for a solution, I delved into some research and formulated the following approach

I eliminated the pipes from the equation and devised a utility class that links all the functions together to produce the desired result

sort-users.ts

export class SortUsers {
   private _users: Users[];

   constructor(@Optional() users: Users[]) {
     this._users = users;
   }

   private search() {
     // ...
     return this;
   }

   private filter() {
     // ...
     return this;
   }

   private order() {
     // ...
     return this
   }

   public sort(users, searchTerm, filters, order) {
      const sort = new SortUsers(users);
      return sort
        .search(searchTerm)
        .filter(filters)
        .order(order)
   }
}

Subsequently, within my component

private USERS: Users[];
users: Users[]

// ...

constructor(
  private _sort: SortUsers
) {}

// ...

sortUsers() {
   // ...
   this.users = this._sort(this.USERS, this.searchTerm, this.filters, this.order);
}

Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

Answer №1

Answer №2

Similar questions

Angular failing to render data in user interface

Printing problems with Angular POS software

Tips for utilizing playFromPositionAsync method with expo-av Video in React Native

React textarea trigger function on blur event

Display a child element depending on a certain condition

Guide on incorporating jQuery into a jQuery plugin within an Angular 2+ application using Webpack or Angular CLI

Creating dynamic HTML templates in Webstorm using template strings with Angular 2

Generating divs dynamically with inline styling and utilizing ngFor, while incorporating a conditional check with ngIf in Angular

You are unable to call upon an object that may be of type 'undefined' in typescript

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

TS7030: In Angular13, ensure that all code paths within the guard and canActivate methods return a value

Is there a solution for the error message "Operator '+' cannot be used with types 'string | number' and 'string' | number'"?

What causes the typescript error in my code: The argument being passed is either a string, an array of FilterData, an array of numbers, or an array of Moments, which is not compatible with a parameter of type 'string'?

Communication between Angular components

Creating a personalized attribute directive within Angular2

Using regular expressions, replace all instances of " " with ' ' based on certain conditions

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Dealing with Cross-Origin Resource Sharing (CORS) issue in an Angular 6 and .Net Core

Button activated by specified row index in Angular test

Angular's '@angular/core/core' module does not have the exported member 'ɵɵFactoryDeclaration'