🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

ng2-nested-search

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-nested-search

A simple custom pipe for filtering arrays in your angular(2+) projects and get the count of filtered items.

1.2.0
latest
Source
npm
Version published
Weekly downloads
18
200%
Maintainers
1
Weekly downloads
 
Created
Source

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.

Screen Recording 2021-09-26 at 3 04 06 PM

Search on specific properties

Screen Recording 2021-09-26 at 2 59 50 PM

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 {}

For enabling nested search, set isNestedSearch to true in the filterMetadata as shown below

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

    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"
    }
]

in HTML

  <div style="text-align: center;">
    <div style="display : inline-block; width : 48%">
      <input style="width: 100%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search By Family" [(ngModel)]="searchFamily"/>
    </div>
    <div style="display : inline-block; width : 48%">
      <input style="width: 100%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search By Name" [(ngModel)]="searchName"/>
    </div>
  </div>

  <div style="padding : 8px 4px 0px 4px;">
    <span>Total items filtered : </span>
    <span [innerHTML]="filterMetadata.count"></span>
  </div>

  <div class="ttct-request" 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 may also use a single search box to filter on specific properties only, initialize the searchText and filterMetadata in your page.ts as follows

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

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%; padding: 13px; border-radius: 4px; border: 1px solid #ccc;" placeholder="Search" [(ngModel)]="searchText"/>
    </div>
  </div>

  <div style="padding : 8px 4px 0px 4px;">
    <span>Total items filtered : </span>
    <span [innerHTML]="filterMetadata.count"></span>
  </div>

  <div class="ttct-request" 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>

Contact

gmail : melwin.vincent.90@gmail.com

Keywords

ng2-nested-search

FAQs

Package last updated on 27 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts