ng-search-bar

Angular component that generates input UI for filtering data with JSON output

Live Demo hosted in github page

Overview

Usage:

Put below html in your target page template

<ng-search-bar [config]="config" (onFilterChanged)="onFilterChanged($event)"></ng-search-bar>

Put below code in the page component class

public config: SearchConfig = {
	autoRefresh: true,
	fields: [
		{
			name: 'name',
			type: SearchFieldType.String,
			isCaseSensitive: false,
		},
		{
			name: 'age',
			type: SearchFieldType.Number,
			min: 1,
			max: 120,
		},
		{
			name: 'department',
			type: SearchFieldType.String,
			isCaseSensitive: false,
		},
		{
			name: 'isActive',
			type: SearchFieldType.Boolean,
			caption: 'Is Active',
			checked: true,
		},
	],
};

That's it! Run your application and check the result

The ng-search-bar will generate the search controls as below:

Search Criteria JSON output:

{
   "name":{
      "includes":"John"
   },
   "age":{
      "largeThanOrEqualTo":16,
      "lessThanOrEqualTo":62
   },
   "department":{
      "includesSensitive":"IT"
   },
   "isActive":{
      "equalTo":true
   }
}

More features coming! In-progress...