nrx-search v1.0.0

NrxSearch

This library was generated with Angular CLI version 12.1.2.

Demo Click Here

 Search feature for Angular project.

Step 1

npm install nrx-search

Step 2

app.module.ts

import { NrxSearchModule } from 'nrx-search';
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    NrxSearchModule
  ]

Step 3

app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  public data: Array<any> = [];
  public term: any = "";
  public prop: any = "null";
  public propOptions: Array<any> = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/comments').subscribe((res: any) => {
      this.data = res;
      if (this.data.length > 0) {
        this.propOptions = Object.keys(this.data[0]);
      }
    });
  }
}

app.component.html

<input [(ngModel)]="term" type="text" placeholder="search" />
<select [(ngModel)]="prop">
  <option value="null">All</option>
  <ng-container *ngFor="let opt of propOptions;">
    <option value="{{opt}}">{{opt}}</option>
  </ng-container>
</select>
<table>
  <tr>
    <th>Email</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let item of data | ngSearch: { term: term, prop: prop }; index as i;">
    <td>
      {{item.email}}
    </td>
    <td>
      {{item.name}}
    </td>
  </tr>
</table>