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

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:

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@next-level-integration/nli-search-bar-lib
Minified + gzip package size for @next-level-integration/nli-search-bar-lib in KB

Readme

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.