This is an angular table searcher. it helps to use keys provided to search through a list of objects and if no keys are provided, it searches for the occurrence of the input value. it also makes request to endpoint if url is provided for backend search.
npm install angular-table-searcher
Angular 4 from 4.0.0 and above.
Angular 5 from 5.0.0 and above.
``
## Dependencies
npm install font-awesome --save
Read up on how to setup font-awesome in your application.
## Installation
npm install --save angular-table-searcher
Usage in Application
Follow the instruction below to use angular-table-searcher.
import {AngularTableSearcherModule} from 'angular-table-searcher';
Add AngularTableSearcherModule.forRoot() in AppModule or Other Modules using AngularTableSearcherModule
# Notice:
``
path: full path of the api url to call for search option.
from: the key the eventService will use in mapping when data has responded from angular-table-seacher. (from key must be unique to every component using searcher)
data: (paginated response), this must be the first data rendered from the component which information are picked to enable searching.
searchKeys: Keys to tell the AngularTableSearcher to use to filter data but can be empty array to search all through object and its child.
searchType: We have three search types which can be from backend, table, table not found with backend.
placeholder: What to display in the input field as a message
buttonColor: The background color of the table seacher.
borderColor: The border-bottom color of the table seacher.
queryField: The field name to pass search value into. such as search will be search='value entered'
``
A sample AngularTableSearcher built url for searching will be http://localhost:8088/api/organizations?search=olanipekun'
## *.component.ts
Add/refactor the following code to the appropriate places in your component.ts
## searching
Searching can either be done with enter or button click after value has been supplied.
## Response
The response from angular-table-searcher is an object of type:
``
{
result: Object | Array,
data: Array // data passed down to table-searcher.
}
``
``
import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import 'rxjs/add/operator/map';
import {EventsService, TableSearcherTypesEnum} from "angular-table-searcher";
import {TableSearcherInterface} from "./table-searcher/table-searcher.interface";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
public tableSearcher: TableSearcherInterface``
## *.component.html
Add this below the table you want it to paginate data from backend.
``
#
Name
{{(i + 1)}}
{{page?.name}}
``
Backend expected request
Your backend will expect
``
queryField: any type to search information
``
Build as a package
npm run pack-build
Publish to npm
npm publish dist`