diff options
Diffstat (limited to 'stories/ng2-component-lab/filter-bar.component.exp.ts')
-rw-r--r-- | stories/ng2-component-lab/filter-bar.component.exp.ts | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/filter-bar.component.exp.ts b/stories/ng2-component-lab/filter-bar.component.exp.ts new file mode 100644 index 0000000..12a287d --- /dev/null +++ b/stories/ng2-component-lab/filter-bar.component.exp.ts @@ -0,0 +1,56 @@ +import { experimentOn } from '@islavi/ng2-component-lab'; +import { SearchFilterPipe } from './pipes/search-filter-pipe'; + +const action = (e): void => { + console.log("The search query was changed to: ", e); +}; + +export default experimentOn('Filter Bar').group('FilterBar', [ + { + id: 'filterBar', + title: 'Filter bar', + description: ` + The filter bar component text is updated (after debounce time, + default 200 miliseconds) while user write something. + In this example the event on search query changed: + const action = (e): void => { + console.log("The search query was changed to: ", e); + }; + `, + context: { + onChange: action + }, + showSource: true, + template: ` + <sdc-filter-bar placeholder="filter text" + label="filter example:" + [(searchQuery)]="searchText" + (searchQueryChange)="onChange($event)"> + </sdc-filter-bar> + <br> + Text to search: {{searchText}} + ` + }, + { + id: 'filterBarWithData', + title: 'Filter bar with data', + description: ` + Example of filter bar component with debounce 100 miliseconds, + and with example pipe for filterring. + `, + context: { + data: ['apple', 'banana', 'orange', 'peach'] + }, + showSource: true, + template: ` + <sdc-filter-bar placeholder="filter text" + label="filter example:" + [debounceTime]="100" + [(searchQuery)]="searchText"> + </sdc-filter-bar> + <ul style="height: 100px; background-color: #eeeeee;"> + <li *ngFor="let item of data | PipeSearchFilter:searchText">{{item}}</li> + </ul> + ` + } +]); |