ngx-mgmg-filter-pipe

Angular17+ Filter Pipe

Filter arrays

Angular +17 pipeline for filtering arrays.

Demo Page

https://MagdyElsayyad.github.io/ngx-mgmg-filter-pipe/

In HTML template

{{ collection | filterBy: searchTerm }}

Arguments

Param	Type	Details
collection	array	The collection to filter
searchTerm	string or number or object or array or function	Predicate used to filter items from collection

Install

npm install ngx-mgmg-filter-pipe 

Usage

Import FilterPipe to your Standalone component or Module

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    FilterPipe
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

And use pipe in the template

import { Component } from '@angular/core';
 
@Component({
  selector: 'example-app',
  standalone: true,
  imports: [FilterPip],
  template: `
    <div>
        <input type="text" [(ngModel)]="userFilter.name" placeholder="name">
        <ul>
          <li *ngFor="let user of users | filterBy: userFilter">{{ user.name }}</li>
          
          <!-- in case you want to show empty message -->
          <li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li>
        </ul>
    </div>  
  `
})
 
export class AppComponent {
  users: any[] = [{ name: 'John' }, { name: 'Jane' }, { name: 'Mario' }];
  userFilter: any = { name: '' };
}

$or matching

Use $or to filter by more then one values.

$or expects an Array.

In your component:

// your array
const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];
// your $or filter
const filter = { $or: ['German', 'English'] };

In your template:

<div *ngFor="let language of languages | filterBy: filter">
  {{ language }}
</div>

Result will be:

<div>English</div>
<div>German</div>

$or example with nessted values

In your component:

// your array
const languages = [
  { language: 'English' },
  { language: 'German' },
  { language: 'Italian' }
];

// your $or filter
const filter = {
  language: {
    $or: ['Italian', 'English']
  }
};

In your template:

<div *ngFor="let object of languages | filterBy: filter">
  {{ object.language }}
</div>

Result:

<div>English</div>
<div>Italian</div>

$or example with multiple predicates

const objects = [
  { name: 'John' },
  { firstName: 'John' }
]

const filter = { $or: [{ name: 'John' }, { firstName: 'John' }] }

In your template:

<div *ngFor="let object of objects | filterBy: filter">
  {{ object | json }}
</div>

Result:

<div>{ name: 'John' }</div>
<div>{ firstName: 'John' }</div>

Use FilterPipe in a component

Inject FilterPipe into your component and use it:

class AppComponent {
  objects = [
    { name: 'John' },
    { name: 'Nick' },
    { name: 'Jane' }
  ];
  
  constructor(private filter: FilterPipe) {
    let result = this.filter.transform(this.objects, { name: 'J' });
    console.log(result); // [{ name: 'John' }, { name: 'Jane' }]
  }
}

Contribute

License

MIT © Magdy Elsayyad