Skip to content

๐—”๐—ป๐—ด๐˜‚๐—น๐—ฎ๐—ฟ ๐˜‚๐—ป๐—ถ๐˜ƒ๐—ฒ๐—ฟ๐˜€๐—ฎ๐—น ๐—ฝ๐—ถ๐—ฝ๐—ฒ to ๐—ณ๐—ถ๐—น๐˜๐—ฒ๐—ฟ your array of objects.โœจ (accent marks and upper/lowercase ignored!) ๐Ÿงจ Filter your objects with high accuracy and speed ๐Ÿ”ฅ

License

Notifications You must be signed in to change notification settings

Josee9988/Filter-Pipe-ngx

Repository files navigation

FilterPipeNgx for angular universal

Simple angular pipe that allows you to filter arrays of objects and simple arrays by a given text.

This angular universal filter pipe is able to filter by any field in your array of objects and can even ignore the accent marks or upercase/lowercase text.

Originally filter pipe based on solodynamo/ng2-search-filter, please do check his project.

Version Downloads License Vulnerabilities npm bundle size (scoped version) Node.js CI


Installation

  1. Install the pipe to your project.

    npm i @josee9988/filter-pipe-ngx --save
  2. Import the pipe to your app.module.ts.

    import {FilterModule} from '@josee9988/filter-pipe-ngx';
  3. Declare and initialize the pipe to your project.

    // rest of your imports here...
    
    @NgModule({
      imports: [ // in the imports section
        FilterModule, // add the pipe to your declarations
        // rest of the code ...

Examples of use

example of other web

Example of other integration in another web.

Stackblitz example

example of stackblitz

Check the stackblitz example or simply click the above image!

Direct component example

import {Component} from '@angular/core';

@Component({
  selector: 'app-example-filter-pipe-products',
  template: `
<!-- Input in which you will filter your products (you array) -->
<input type="text" [(ngModel)]="searchText">

<!-- Display your data and filter it by your input -->
<div *ngFor = "let arrayItem of yourArrayToBeFiltered | filterPipe:searchText">

    <!-- Every object that matches the filter (if there is any filter) will be shown -->
  <p>Name: {{arrayItem.name}}, Inventory: {{arrayItem.inventory}}, price: {{arrayItem.price}}</p>

</div>`
})

export class ExampleFilterPipeProducts {
  yourArrayToBeFiltered: any[] = [
   {name: 'chair', inventory: 5, price: 45.99},
   {name: 'table', inventory: 10, price: 123.75},
   {name: 'sofa', inventory: 2, price: 399.50},
   {name: 'bed', inventory: 4, price: 592.12}];
  searchText: string;
}

For deeper information about angular pipes check the oficial documentation.


Contributing

This project is actively looking for new contributors to develop new functions, maintain and improve the project. If you are interested make sure to fork the project and pull-request your improvements to be added as a contributor!


Did you enjoyed the package? Help us raise these numbers!

Github followers Github stars Github watchers Github forks Sponsor

Check the npm page with the package.


Made with a lot of โค๏ธโค๏ธ by @Josee9988

About

๐—”๐—ป๐—ด๐˜‚๐—น๐—ฎ๐—ฟ ๐˜‚๐—ป๐—ถ๐˜ƒ๐—ฒ๐—ฟ๐˜€๐—ฎ๐—น ๐—ฝ๐—ถ๐—ฝ๐—ฒ to ๐—ณ๐—ถ๐—น๐˜๐—ฒ๐—ฟ your array of objects.โœจ (accent marks and upper/lowercase ignored!) ๐Ÿงจ Filter your objects with high accuracy and speed ๐Ÿ”ฅ

Topics

Resources

License

Stars

Watchers

Forks