# ng-material2-facet-search
> An Angular library that contains a facet search bar component, based on Angular team's Material Design components
Latest version **0.1.5** (published 2019-03-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install ng-material2-facet-search
pnpm add ng-material2-facet-search
yarn add ng-material2-facet-search
bun add ng-material2-facet-search
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.5 |
| Published | 2019-03-28 |
| First published | 2018-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 471.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Firat Deniz |
| Maintainers | firat |
| Keywords | angular, angular2, angular7, material, material2, facet, faceted, search, filter, table |
## Links
- npm: https://www.npmjs.com/package/ng-material2-facet-search
- npm.io page: https://npm.io/package/ng-material2-facet-search
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 0.1.5 (latest) — 2019-03-28
- 0.1.4 — 2019-03-21
- 0.1.3 — 2019-03-20
- 0.1.2 — 2019-03-19
- 0.1.1 — 2019-03-19
- 0.1.0 — 2019-03-19
- 0.0.5 — 2018-06-19
- 0.0.4 — 2018-06-12
- 0.0.3 — 2018-06-11
- 0.0.2 — 2018-06-08
- 0.0.1 — 2018-06-08
## README
# ng-material2-facet-search
This is An Angular library that contains a [facet search](https://en.wikipedia.org/wiki/Faceted_search) bar component, based on Angular team's [Material Design components](https://material.angular.io/).
Google uses something similar in some of their internal portals like [Cloud Console](https://console.cloud.google.com) and [G-Suite Admin Console](https://gsuite.google.com/products/admin/).
[Source at Github](https://github.com/fdeniz/ng-material2-facet-search)
[](https://www.npmjs.com/package/ng-material2-facet-search)
---
[Try Example App](https://ng-material2-facet-search-example.stackblitz.io) - ([Edit on StackBlitz ⚡️](https://stackblitz.com/edit/ng-material2-facet-search-example))
---
[Try Table Example on Github API](https://ng-material2-facet-search-github-api-example.stackblitz.io) - ([Edit on StackBlitz ⚡️](https://stackblitz.com/edit/ng-material2-facet-search-github-api-example))
## Installation
```bash
npm i ng-material2-facet-search
```
## Usage
* Import ```NgMaterial2FacetSearchModule``` module in ```app.module.ts```
* Add ```ng-material2-facet-search``` directive in your component, and configure it as you like.
## Basic Example
```app.component.html```
```html
```
```app.component.ts```
```javascript
import { Component, OnInit } from '@angular/core';
import { Facet, FacetDataType } from 'ng-material2-facet-search';
import { of, } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// Facet Definitions
// You can either define and configure your facets as static object array,
// or you can generate dynamically based on your data from back end.
public facets: Array = [{
// facet's object name
name: 'userName',
// label text for ui (optional)
text: 'User Name',
// type of the facet, options are;
// "Text" (input), "Boolean" (checkbox), "Category" (multi select),
// "CategorySingle" (single select), "Date" (date picker) and "DateRange" (date pickers)
type: FacetDataType.Text,
// description text for ui (optional)
description: 'Please enter your user name (simple text input example)',
// name of the material icon (optional) (https://material.io/tools/icons)
icon: 'person_outline',
// you can set a facet as readonly to disable editing.
readonly: false,
}, {
name: 'birthday',
text: 'Birthday',
icon: 'date_range',
description: 'Please select your birthday (date select example)',
type: FacetDataType.Date,
}, {
name: 'eventDays',
text: 'Event Days',
icon: 'event_available',
description: 'Please select start and end dates (date range select example)',
type: FacetDataType.DateRange,
}, {
name: 'isParticipant',
text: 'Is a Participant?',
icon: 'live_help',
description: 'This is a test field, you can test boolean data type.',
type: FacetDataType.Boolean,
}, {
name: 'state',
text: 'State',
description: 'Please select something (single select, http example)',
type: FacetDataType.CategorySingle,
icon: 'folder_open',
/* mock http service call */
// you can define this facet's selection items as observable array, or fixed array.
options: of([
{ value: 'open', text: 'Open', count: 49 },
{ value: 'closed', text: 'Closed', count: 23 }
]).pipe(delay(700))
}, {
name: 'license',
text: 'License(s)',
description: 'Please select your licenses (multi select, http example)',
type: FacetDataType.Category,
icon: 'drive_eta',
/* mock http service call */
options: of([
{ value: 'a', text: 'Class A' },
{ value: 'b', text: 'Class B' },
{ value: 'c', text: 'Class C' }
]).pipe(delay(1200))
}];
constructor() {
}
ngOnInit(): void {
}
// you can use an event method like this to trigger your filtering logic.
filterUpdated = (facetFilters: Array): void => {
console.log('filter', facetFilters);
}
}
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
[MIT](https://choosealicense.com/licenses/mit/)
---
_Source: https://npm.io/package/ng-material2-facet-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._