test-ykh v0.0.5
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)="">
</nli-search-bar>
placeHolder: input parameter for hint
onSearch: output parameter for applying searchSetup Steps:
Add dependency in package.json under dependencies object:
"nli-search-bar-lib": "^0.0.2"Add CSS dependencies to main html file which by default is index.html:
Run npm install in project folder (The home folder that
package.jsonexists):npm installThis command downloads all dependencies including nli-search-bar-lib. You can also download just this module with:npm install nli-search-bar-libImport 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)">
</nli-search-bar>
</div>