ng2-nested-search

ng2-nested-search

A simple custom pipe for filtering arrays in your Angular 2 projects (works with Angular 4 and Angular 5 too) and get the count of filtered items. It supports nested search and you may search the array of items on specific properties.

How to use

import FilterPipeModule to your module (here I'm lazy loading)

import { NgModule } from '@angular/core';
import { ViewCharacters } from './view-characters';
import { FilterPipeModule } from 'ng2-nested-search';

@NgModule({
  declarations: [
    ViewCharacters
  ],
  imports: [
    FilterPipeModule
  ],
})
export class ViewCharactersModule {}

initialize the searchText and filterMetadata in your page.ts as follows

searchText : string = "";
filterMetadata = { count: 0 };

characters = [
    {
        name : "Daenerys",
        family : "Targaryen",
        gender : "Female"
    },
    {
        name : "Jaime",
        family : "Lannister",
        gender : "Male"
    },
    {
        name : "Sansa",
        family : "Stark",
        gender : "Female"
    },
    {
        name : "Arya",
        family : "Stark",
        gender : "Female"
    },
    {
        name : "Theon",
        family : "Greyjoy",
        gender : "Male"
    }
]

add the ng2-nested-search component in your page.html as follows (only filtering on name and family in the example)

<div style="text-align: center;">
    <div style="display : inline-block; width : 100%">
      <input style="width: 100%;" placeholder="Search" [(ngModel)]="searchText"/>
    </div>
  </div>

  <div style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchText, 'family' : searchText} : filterMetadata">
    <div>
      <span style="color: #888;">Name : </span>
      <span [innerHTML]="character.name"></span>
    </div>
    <div>
      <span style="color: #888;">Family : </span>
      <span [innerHTML]="character.family"></span>
    </div>
    <div>
      <span style="color: #888;">Gender : </span>
      <span [innerHTML]="character.gender"></span>
    </div>
  </div>

For enabling nested search, set isNestedSearch to true (by default it is false) in the filterMetadata as shown below

    searchName : string = "";
    searchFamily : string = "";
    filterMetadata = { count: 0, isNestedSearch : true };

in HTML

<div style="text-align: center;">
    <div style="display : inline-block; width : 48%">
      <input placeholder="Search By Family" [(ngModel)]="searchFamily"/>
    </div>
    <div style="display : inline-block; width : 48%">
      <input placeholder="Search By Name" [(ngModel)]="searchName"/>
    </div>
</div>

<div style="border: 1px solid #ccc;padding: 8px;margin: 8px;border-radius: 4px;" *ngFor="let character of characters | ng2NestedSearch: { 'name' : searchName, 'family' : searchFamily} : filterMetadata">
    <div>
      <span style="color: #888;">Name : </span>
      <span [innerHTML]="character.name"></span>
    </div>
    <div>
      <span style="color: #888;">Family : </span>
      <span [innerHTML]="character.family"></span>
    </div>
    <div>
      <span style="color: #888;">Gender : </span>
      <span [innerHTML]="character.gender"></span>
    </div>
</div>

You can display the filtered elements count as follows

<div>
    <span>Total items filtered : </span>
    <span [innerHTML]="filterMetadata.count"></span>
</div>

Contact

gmail : [e-mail]