diff --git a/src/app/filter/example/filter-basic-example.component.ts b/src/app/filter/example/filter-basic-example.component.ts
index e9f013b50..285b04390 100644
--- a/src/app/filter/example/filter-basic-example.component.ts
+++ b/src/app/filter/example/filter-basic-example.component.ts
@@ -32,7 +32,8 @@ export class FilterBasicExampleComponent implements OnInit {
weekDay: 'Sunday',
weekdayId: 'day1'
}, {
- name: 'John Smith', address: '415 East Main Street, Norfolk, Virginia',
+ name: 'John Smith',
+ address: '415 East Main Street, Norfolk, Virginia',
birthMonth: 'October',
birthMonthId: '10',
weekDay: 'Monday',
@@ -115,22 +116,31 @@ export class FilterBasicExampleComponent implements OnInit {
value: 'December'
}]
}, {
- id: 'byIcon',
- title: 'By Icon',
- placeholder: 'Filter by Icon...',
+ id: 'weekDay',
+ title: 'Week Day',
+ placeholder: 'Filter by Week Day...',
type: FilterType.SELECT,
queries: [{
- id: 'bookmark',
- value: 'Bookmark',
- iconStyleClass: 'fa fa-bookmark'
+ id: 'day1',
+ value: 'Sunday'
}, {
- id: 'map',
- value: 'Map',
- iconStyleClass: 'fa fa-map-marker'
+ id: 'day2',
+ value: 'Monday'
}, {
- id: 'gift',
- value: 'Gift',
- iconStyleClass: 'fa fa-gift'
+ id: 'day3',
+ value: 'Tuesday'
+ }, {
+ id: 'day4',
+ value: 'Wednesday'
+ }, {
+ id: 'day5',
+ value: 'Thursday'
+ }, {
+ id: 'day6',
+ value: 'Friday'
+ }, {
+ id: 'day7',
+ value: 'Saturday'
}]
}] as FilterField[],
resultsCount: this.items.length,
@@ -164,10 +174,11 @@ export class FilterBasicExampleComponent implements OnInit {
matchesFilter(item: any, filter: Filter): boolean {
let match = true;
+ let re = new RegExp(filter.value, 'i');
if (filter.field.id === 'name') {
- match = item.name.match(filter.value) !== null;
+ match = item.name.match(re) !== null;
} else if (filter.field.id === 'address') {
- match = item.address.match(filter.value) !== null;
+ match = item.address.match(re) !== null;
} else if (filter.field.id === 'birthMonth') {
match = item.birthMonth === filter.value;
} else if (filter.field.id === 'weekDay') {
diff --git a/src/app/filter/example/filter-example.component.html b/src/app/filter/example/filter-example.component.html
index dd725d95a..b67d8093f 100644
--- a/src/app/filter/example/filter-example.component.html
+++ b/src/app/filter/example/filter-example.component.html
@@ -18,5 +18,8 @@
Filter Component Example
+
+
+
diff --git a/src/app/filter/example/filter-example.module.ts b/src/app/filter/example/filter-example.module.ts
index 44e24e07a..d7466b7c8 100644
--- a/src/app/filter/example/filter-example.module.ts
+++ b/src/app/filter/example/filter-example.module.ts
@@ -7,6 +7,7 @@ import { TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs';
import { DemoComponentsModule } from '../../../demo/components/demo-components.module';
import { FilterBasicExampleComponent } from './filter-basic-example.component';
import { FilterExampleComponent } from './filter-example.component';
+import { FilterIconExampleComponent } from './filter-icon-example.component';
import { FilterLazyExampleComponent } from './filter-lazy-example.component';
import { FilterModule } from '../filter.module';
import { FilterSaveExampleComponent } from './filter-save-example.component';
@@ -23,6 +24,7 @@ import { FilterTypeAheadExampleComponent } from './filter-type-ahead-example.com
declarations: [
FilterBasicExampleComponent,
FilterExampleComponent,
+ FilterIconExampleComponent,
FilterLazyExampleComponent,
FilterSaveExampleComponent,
FilterTypeAheadExampleComponent
diff --git a/src/app/filter/example/filter-icon-example.component.html b/src/app/filter/example/filter-icon-example.component.html
new file mode 100644
index 000000000..c40bf57ec
--- /dev/null
+++ b/src/app/filter/example/filter-icon-example.component.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+ {{item.name}}
+
+
+ {{item.address}}
+
+
+ {{item.birthMonth}}
+
+
+ {{item.weekDay}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/filter/example/filter-icon-example.component.ts b/src/app/filter/example/filter-icon-example.component.ts
new file mode 100644
index 000000000..c2fff99af
--- /dev/null
+++ b/src/app/filter/example/filter-icon-example.component.ts
@@ -0,0 +1,141 @@
+import {
+ Component,
+ OnInit,
+} from '@angular/core';
+
+import { Filter } from '../filter';
+import { FilterConfig } from '../filter-config';
+import { FilterField } from '../filter-field';
+import { FilterEvent } from '../filter-event';
+import { FilterType } from '../filter-type';
+
+@Component({
+ selector: 'filter-icon-example',
+ templateUrl: './filter-icon-example.component.html'
+})
+export class FilterIconExampleComponent implements OnInit {
+ allItems: any[];
+ items: any[];
+ filterConfig: FilterConfig;
+ filtersText: string = '';
+ separator: Object;
+
+ constructor() {
+ }
+
+ ngOnInit(): void {
+ this.allItems = [{
+ name: 'Fred Flintstone',
+ address: '20 Dinosaur Way, Bedrock, Washingstone',
+ birthMonth: 'February',
+ birthMonthId: 'month2',
+ icon: 'bookmark',
+ iconStyleClass: 'fa fa-bookmark',
+ weekDay: 'Sunday',
+ weekdayId: 'day1'
+ }, {
+ name: 'John Smith', address: '415 East Main Street, Norfolk, Virginia',
+ birthMonth: 'October',
+ birthMonthId: '10',
+ icon: 'map',
+ iconStyleClass: 'fa fa-map-marker',
+ weekDay: 'Monday',
+ weekdayId: 'day2'
+ }, {
+ name: 'Frank Livingston',
+ address: '234 Elm Street, Pittsburgh, Pennsylvania',
+ birthMonth: 'March',
+ birthMonthId: 'month3',
+ icon: 'gift',
+ iconStyleClass: 'fa fa-gift',
+ weekDay: 'Tuesday',
+ weekdayId: 'day3'
+ }, {
+ name: 'Judy Green',
+ address: '2 Apple Boulevard, Cincinatti, Ohio',
+ birthMonth: 'December',
+ birthMonthId: 'month12',
+ icon: 'map',
+ iconStyleClass: 'fa fa-map-marker',
+ weekDay: 'Wednesday',
+ weekdayId: 'day4'
+ }, {
+ name: 'Pat Thomas',
+ address: '50 Second Street, New York, New York',
+ birthMonth: 'February',
+ birthMonthId: 'month2',
+ icon: 'bookmark',
+ iconStyleClass: 'fa fa-bookmark',
+ weekDay: 'Thursday',
+ weekdayId: 'day5'
+ }];
+ this.items = this.allItems;
+
+ this.filterConfig = {
+ fields: [{
+ id: 'icon',
+ title: 'By Icon',
+ placeholder: 'Filter by Icon...',
+ type: FilterType.SELECT,
+ queries: [{
+ id: 'bookmark',
+ value: 'bookmark',
+ iconStyleClass: 'fa fa-bookmark'
+ }, {
+ id: 'map',
+ value: 'map',
+ iconStyleClass: 'fa fa-map-marker'
+ }, {
+ id: 'gift',
+ value: 'gift',
+ iconStyleClass: 'fa fa-gift'
+ }]
+ }] as FilterField[],
+ resultsCount: this.items.length,
+ appliedFilters: []
+ } as FilterConfig;
+ }
+
+ // Filter functions
+
+ applyFilters(filters: Filter[]): void {
+ this.items = [];
+ if (filters && filters.length > 0) {
+ this.allItems.forEach((item) => {
+ if (this.matchesFilters(item, filters)) {
+ this.items.push(item);
+ }
+ });
+ } else {
+ this.items = this.allItems;
+ }
+ this.filterConfig.resultsCount = this.items.length;
+ }
+
+ filterChanged($event: FilterEvent): void {
+ this.filtersText = '';
+ $event.appliedFilters.forEach((filter) => {
+ this.filtersText += filter.field.title + ' : ' + filter.value + '\n';
+ });
+ this.applyFilters($event.appliedFilters);
+ }
+
+ matchesFilter(item: any, filter: Filter): boolean {
+ let match = true;
+ if (filter.field.id === 'icon') {
+ match = item.icon === filter.value;
+ }
+ return match;
+ }
+
+ matchesFilters(item: any, filters: Filter[]): boolean {
+ let matches = true;
+ filters.forEach((filter) => {
+ if (!this.matchesFilter(item, filter)) {
+ matches = false;
+ return matches;
+ }
+ });
+ return matches;
+ }
+}
diff --git a/src/app/filter/example/filter-lazy-example.component.html b/src/app/filter/example/filter-lazy-example.component.html
index 8b63f2082..24accb852 100644
--- a/src/app/filter/example/filter-lazy-example.component.html
+++ b/src/app/filter/example/filter-lazy-example.component.html
@@ -4,6 +4,7 @@