From 7a804d42171a411c8125b98323b418b03e64a324 Mon Sep 17 00:00:00 2001 From: ruekart Date: Tue, 14 Jun 2022 15:06:40 -0500 Subject: [PATCH] [Feature] Custom no entries found element (#382) * add ngxMatSelectNoEntriesFound directive * change ngx-mat-select-search to use ngxMatSelectNoEntriesFound directive * add custom no entries found element example * rename no entries found example component * export MatSelectNoEntriesFoundDirective in NgxMatSelectSearchModule * fix typo * format mat-select-search.component.html * move custom-no-entries-found-example.component * add README.md entry for customize no entries found element * adjust custom no entries found example Co-authored-by: Esteban Gehring --- README.md | 13 +++ src/app/app.component.html | 2 + src/app/app.module.ts | 2 + ...om-no-entries-found-example.component.html | 23 +++++ ...om-no-entries-found-example.component.scss | 0 ...stom-no-entries-found-example.component.ts | 92 +++++++++++++++++++ .../mat-select-no-entries-found.directive.ts | 15 +++ .../mat-select-search.component.html | 4 +- .../mat-select-search.component.ts | 4 + .../ngx-mat-select-search.module.ts | 8 +- 10 files changed, 160 insertions(+), 3 deletions(-) create mode 100644 src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.html create mode 100644 src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.scss create mode 100644 src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.ts create mode 100644 src/app/mat-select-search/mat-select-no-entries-found.directive.ts diff --git a/README.md b/README.md index 78522ce..7b247a0 100644 --- a/README.md +++ b/README.md @@ -191,6 +191,19 @@ In order to customize the search icon, add the `ngxMatSelectSearchClear` to your ``` If just the icon should be changed the inputs `closeIcon` and `closeSvgIcon` can be used. +#### Customize no entries found element +In order to customize the no entries found element, add the `ngxMatSelectNoEntriesFound` to your custom item (a `mat-icon, span, button` or any other element) and place it inside the `ngx-mat-select-search` component: +```html + + + No entries found + + + +``` + #### Custom content Custom content with the CSS class `mat-select-search-custom-header-content` can be transcluded as follows: ```html diff --git a/src/app/app.component.html b/src/app/app.component.html index c4d0b57..a37cef2 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -17,6 +17,8 @@

Examples

+ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dd97b4d..b62c07f 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { } from './examples/06-multiple-selection-select-all-example/multiple-selection-select-all-example.component'; import { TooltipSelectAllExampleComponent } from './examples/07-tooltip-select-all-example/tooltip-select-all-example.component'; import { InfiniteScrollExampleComponent } from './examples/08-infinite-scroll-example/infinite-scroll-example.component'; +import { CustomNoEntriesFoundExampleComponent } from './examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; @@ -56,6 +57,7 @@ export class MaterialModule {} SingleSelectionExampleComponent, MultipleSelectionExampleComponent, CustomClearIconExampleComponent, + CustomNoEntriesFoundExampleComponent, OptionGroupsExampleComponent, ServerSideSearchExampleComponent, MultipleSelectionSelectAllExampleComponent, diff --git a/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.html b/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.html new file mode 100644 index 0000000..8db0bd1 --- /dev/null +++ b/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.html @@ -0,0 +1,23 @@ +

Single selection with custom no entries found element

+

+ + + + + + No entries found + + + + + + {{bank.name}} + + + +

+

+ Selected Bank: {{bankCtrl.value?.name}} +

diff --git a/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.scss b/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.ts b/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.ts new file mode 100644 index 0000000..1d36db0 --- /dev/null +++ b/src/app/examples/09-custom-no-entries-found-example/custom-no-entries-found-example.component.ts @@ -0,0 +1,92 @@ +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Bank, BANKS } from '../demo-data'; +import { FormControl } from '@angular/forms'; +import { ReplaySubject, Subject } from 'rxjs'; +import { MatSelect } from '@angular/material/select'; +import { take, takeUntil } from 'rxjs/operators'; + +@Component({ + selector: 'app-custom-no-entries-found-example', + templateUrl: './custom-no-entries-found-example.component.html', + styleUrls: ['./custom-no-entries-found-example.component.scss'] +}) +export class CustomNoEntriesFoundExampleComponent implements OnInit, AfterViewInit, OnDestroy { + + /** list of banks */ + protected banks: Bank[] = BANKS; + + /** control for the selected bank */ + public bankCtrl: FormControl = new FormControl(); + + /** control for the MatSelect filter keyword */ + public bankFilterCtrl: FormControl = new FormControl(); + + /** list of banks filtered by search keyword */ + public filteredBanks: ReplaySubject = new ReplaySubject(1); + + @ViewChild('singleSelect', { static: true }) singleSelect: MatSelect; + + /** Subject that emits when the component has been destroyed. */ + protected _onDestroy = new Subject(); + + + constructor() { } + + ngOnInit() { + // set initial selection + this.bankCtrl.setValue(this.banks[10]); + + // load the initial bank list + this.filteredBanks.next(this.banks.slice()); + + // listen for search field value changes + this.bankFilterCtrl.valueChanges + .pipe(takeUntil(this._onDestroy)) + .subscribe(() => { + this.filterBanks(); + }); + } + + ngAfterViewInit() { + this.setInitialValue(); + } + + ngOnDestroy() { + this._onDestroy.next(); + this._onDestroy.complete(); + } + + /** + * Sets the initial value after the filteredBanks are loaded initially + */ + protected setInitialValue() { + this.filteredBanks + .pipe(take(1), takeUntil(this._onDestroy)) + .subscribe(() => { + // setting the compareWith property to a comparison function + // triggers initializing the selection according to the initial value of + // the form control (i.e. _initializeSelection()) + // this needs to be done after the filteredBanks are loaded initially + // and after the mat-option elements are available + this.singleSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id; + }); + } + + protected filterBanks() { + if (!this.banks) { + return; + } + // get the search keyword + let search = this.bankFilterCtrl.value; + if (!search) { + this.filteredBanks.next(this.banks.slice()); + return; + } else { + search = search.toLowerCase(); + } + // filter the banks + this.filteredBanks.next( + this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1) + ); + } +} diff --git a/src/app/mat-select-search/mat-select-no-entries-found.directive.ts b/src/app/mat-select-search/mat-select-no-entries-found.directive.ts new file mode 100644 index 0000000..660dc73 --- /dev/null +++ b/src/app/mat-select-search/mat-select-no-entries-found.directive.ts @@ -0,0 +1,15 @@ +import { Directive } from '@angular/core'; + +/** + * Directive for providing a custom no entries found element. + * e.g. + * + * + * No entries found + * + * + */ +@Directive({ + selector: '[ngxMatSelectNoEntriesFound]' +}) +export class MatSelectNoEntriesFoundDirective {} diff --git a/src/app/mat-select-search/mat-select-search.component.html b/src/app/mat-select-search/mat-select-search.component.html index e1ef24f..9e5382a 100755 --- a/src/app/mat-select-search/mat-select-search.component.html +++ b/src/app/mat-select-search/mat-select-search.component.html @@ -53,7 +53,9 @@
- {{noEntriesFoundLabel}} + + {{noEntriesFoundLabel}}