Ng-material2-facet-search NPM

ng-material2-facet-search

This is An Angular library that contains a facet search bar component, based on Angular team's Material Design components. Google uses something similar in some of their internal portals like Cloud Console and G-Suite Admin Console.

Source at Github

Try Example App - (Edit on StackBlitz ⚡️)

Stackblitz Example Github API

Try Table Example on Github API - (Edit on StackBlitz ⚡️)

Stackblitz Example Github API

Installation

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

<ng-material2-facet-search
	[source]="facets"
	(searchUpdated)="filterUpdated($event)"
	dateFormat="M/d/yyyy"
	[chipLabelsEnabled]="true" [confirmOnRemove]="true"
	[clearButtonEnabled]="true" placeholder="Add a filter..." clearButtonText="CLEAR FILTERS">
</ng-material2-facet-search>

app.component.ts

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> = [{
		// 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<Facet>): void => {
		console.log('filter', facetFilters);
	}
}