@next-level-integration/nli-search-bar-lib

NliSearchBarLib

Simple material style search box component. This component support dense mode. This component has dependency to google material font and icon. The general structure of component:

<nli-search-bar placeHolder="" (onSearch)="" value="">
</nli-search-bar>

placeHolder: input parameter for hint
onSearch: output parameter for applying search
value: input value

Setup Steps:

1. Add dependency in package.json under dependencies object: "nli-search-bar-lib": "1.1.3"

2. Add CSS dependencies to main html file which by default is index.html:

   ... ...

3. Run npm install in project folder (The home folder that package.json exists): npm install This command downloads all dependencies including nli-search-bar-lib. You can also download just this module with: npm install nli-search-bar-lib

4. Import search-bar module to your project. In your main module (or module that you want use this component) that its default name is app.module.ts, import it:

   import { LibModule as NliSearchModule} from 'nli-search-bar-lib'; ... @NgModule({ ... imports: [ ... NliSearchModule ] ... });

Usage example:

<div style="width: 300px; padding: 20px;" >
	<nli-search-bar placeHolder="Suche" (onSearch)="applySearch($event) value="my text"">
	</nli-search-bar>
</div>