-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update ngx-mat-select-search to version 3.0.0
- Loading branch information
Showing
14 changed files
with
162 additions
and
16 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
25 changes: 25 additions & 0 deletions
25
src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <h3>Integration with <a href="https://github.com/orizens/ngx-infinite-scroll" target="_blank">ngx-infinite-scroll</a></h3> | ||
|
|
||
| <p> | ||
| Selected Bank: {{ctrl?.value}} | ||
| </p> | ||
|
|
||
| <mat-form-field> | ||
| <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" | ||
| [formControl]="ctrl" | ||
| placeholder="Select Something" | ||
| (valueChange)="onChange($event)"> | ||
| <mat-option> | ||
| <!--disableScrollToActiveOnOptionsChanged should be set to true--> | ||
| <ngx-mat-select-search | ||
| [formControl]="searchCtrl" | ||
| placeholderLabel="search" | ||
| [disableScrollToActiveOnOptionsChanged]="true" | ||
| noEntriesFoundLabel="No entry matches"> | ||
| </ngx-mat-select-search> | ||
| </mat-option> | ||
| <mat-option *ngFor="let option of options$ | async" [value]="option"> | ||
| {{option}} | ||
| </mat-option> | ||
| </mat-select> | ||
| </mat-form-field> |
Empty file.
107 changes: 107 additions & 0 deletions
107
src/app/examples/08-infinite-scroll-example/infinite-scroll-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { Component, OnDestroy, OnInit } from '@angular/core'; | ||
| import { FormControl } from '@angular/forms'; | ||
| import { BehaviorSubject, Subject, Subscription } from 'rxjs'; | ||
| import { scan, takeUntil } from 'rxjs/operators'; | ||
|
|
||
| /** | ||
| * Based upon: https://stackblitz.com/edit/mat-select-search-with-infinity-scroll | ||
| */ | ||
| @Component({ | ||
| selector: 'app-infinite-scroll-example', | ||
| templateUrl: './infinite-scroll-example.component.html', | ||
| styleUrls: ['./infinite-scroll-example.component.scss'] | ||
| }) | ||
| export class InfiniteScrollExampleComponent implements OnInit, OnDestroy { | ||
| // Mocks some sort of backend data source | ||
| mockBankList = Array.from({ length: 1000 }).map((_, i) => `Bank ${i}`); | ||
| private _data = new BehaviorSubject<any[]>(this.mockBankList); | ||
| data$ = this._data.asObservable(); | ||
|
|
||
| ctrl: FormControl = new FormControl(); | ||
| searchCtrl: FormControl = new FormControl(); | ||
|
|
||
| subscriptions: Subscription[] = []; | ||
| _options = new BehaviorSubject([]); | ||
| options$ = this._options.asObservable().pipe( | ||
| scan((acc, curr) => { | ||
| if (!acc || !curr) { | ||
| return []; | ||
| } | ||
| return [...acc, ...curr]; | ||
| }, []) | ||
| ); | ||
| offset = 0; | ||
| limit = 20; | ||
| /** | ||
| * Holds the option matches | ||
| * a subset of this data is selected | ||
| * using the offset and limit | ||
| */ | ||
| data = []; | ||
|
|
||
| /** Subject that emits when the component has been destroyed. */ | ||
| protected _onDestroy = new Subject<void>(); | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit() { | ||
| this.data$.pipe( | ||
| takeUntil(this._onDestroy) | ||
| ).subscribe({ | ||
| next: (data) => { | ||
| console.log('Ingested data changed'); | ||
| this.data = data; | ||
| this.offset = 0; | ||
| this._options.next(null); | ||
| this.getNextBatch(); | ||
| } | ||
| }); | ||
|
|
||
| this.searchCtrl | ||
| .valueChanges | ||
| .pipe( | ||
| takeUntil(this._onDestroy) | ||
| ) | ||
| .subscribe((val) => this.onSearchChange(val)); | ||
|
|
||
| this.options$ | ||
| .pipe( | ||
| takeUntil(this._onDestroy) | ||
| ). | ||
| subscribe((val) => console.log(`New view array contains ${val.length} items`)); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this._onDestroy.next(); | ||
| this._onDestroy.complete(); | ||
| } | ||
|
|
||
| onChange(e): void { | ||
| console.log(`Value Changed: ${e}`); | ||
| } | ||
|
|
||
| onSearchChange(e): void { | ||
| console.log(`Search Changed: ${e}`); | ||
| let val = e ? e.trim() : null; | ||
| if (!val) { | ||
| // Empty search, returns everything | ||
| this._data.next(this.mockBankList); | ||
| return; | ||
| } else { | ||
| val = val.toLowerCase(); | ||
| } | ||
|
|
||
| const matches = this.mockBankList.filter((i) => i.toLowerCase().indexOf(val.toLowerCase()) > -1); | ||
| this._data.next(matches); | ||
| } | ||
|
|
||
| /** | ||
| * Used for selecting next batch | ||
| * for ngx-infinite-scroll | ||
| */ | ||
| getNextBatch(): void { | ||
| const results = this.data.slice(this.offset, this.offset + this.limit); | ||
| this._options.next(results); | ||
| this.offset += this.limit; | ||
| } | ||
| } |