mat-select-case v0.0.1
MatSelectCase
This was forked from NgxMatSelect by alireza-sohrabi with some modifications
SearchBox, infinite Scroll and Mobile View are embedded into Angular Material Select Component.
This library was generated for Angular Material to improve select component (mat-select). In this library, I defined a
directive for which generate Search box and Mobile View.
Extra Features, after use this directive:
Searchable (Client Side And Server Side)
Mobile View in two ways ('FullScreen' | 'BottomSheet')
RLT support (use dir='rtl' in html tag)
Compatible with Angular SSR (Universal)
See demo in
stackblitz
Installation Guide
The first step is adding mat-select-case.styles in angular.json
"styles": [
"./node_modules/mat-select-case/src/lib/styles/mat-select-case.styles.css"
],
The second step is adding MatSelectCaseModule into your Module
import {MatSelectModule} from "@angular/material/select";
import {MatSelectCaseModule} from "mat-select-case";
...
@NgModule({
imports: [
...
MatSelectModule,
MatSelectCaseModule
...
]
})
you can define global default configs for root:
MatSelectCaseModule.forRoot({
maxWidthForMobileView: 600,
inFirstLoadCallSearcher: true,
inFirstLoadSearcherValue: '',
emptyLabel: 'no entry found',
noMoreResultLabel: 'no more found',
useInfiniteScroll: false,
searchBoxPlaceholder: 'please search',
maximumResultForShow: 40,
useMobileView: false,
valueMember: 'key',
displayMember: 'value',
mobileViewType: 'FullScreen'
})
or using token (MAT_SELECT_CASE_CONFIGS) in providers:
providers: [
{provide: MAT_SELECT_CASE_CONFIGS, useValue: matSelectCaseConfigs}
],
Samples
Client Side Search (BottomSheet View In Mobile)
Template:
<mat-form-field>
<mat-select
matSelectCase
[hasSearchBox]="true"
[useMobileView]="true"
mobileViewType="BottomSheet"
[(ngModel)]="bankValue"
[multiple]="false"
name="bank"
[required]="true"
[source]="source"
[displayMember]="'value'"
[valueMember]="'key'"
#sf="matSelectCase"
>
<mat-option [value]="option" \*ngFor="let option of sf.filteredSource">
{{option.value}}
</mat-option>
</mat-select>
</mat-form-field>
component.ts:
export class MyComponent implements OnInit {
bankValue = {key: 50, value: 'Bank_50'};
source: any[] = [];
ngOnInit(): void {
for (let i = 0; i < 100; i++) {
this.source.push({value: 'Bank_' + i, key: i})
}
}
}
Client Side Search ( FullScreen View In Mobile)
Template:
<mat-form-field>
<mat-select
matSelectCase
[hasSearchBox]="true"
[useMobileView]="true"
mobileViewType="FullScreen"
[(ngModel)]="bankValue"
[multiple]="true"
name="bank"
[required]="true"
[source]="source"
[displayMember]="'value'"
[valueMember]="'key'"
#sf="matSelectCase"
>
<mat-option [value]="option" \*ngFor="let option of sf.filteredSource">
{{option.value}}
</mat-option>
</mat-select>
</mat-form-field>
component.ts:
export class MyComponent implements OnInit {
bankValue = [{key: 10, value: 'Bank_10'},{key: 75, value: 'Bank_75'}];
source: any[] = [];
ngOnInit(): void {
for (let i = 0; i < 100; i++) {
this.source.push({value: 'Bank\_' + i, key: i})
}
}
}
Server Side Search
Template:
<mat-form-field>
<mat-select
matSelectCase
[lazyLoad]="true"
[searcher]="bankSearcher.bind(this)"
[hasSearchBox]="true"
[useMobileView]="true"
mobileViewType="FullScreen"
[(ngModel)]="bankValue"
[multiple]="true"
name="bank"
[required]="true"
[source]="source"
[displayMember]="'value'"
[valueMember]="'key'"
#sf="matSelectCase"
>
<mat-option [value]="option" \*ngFor="let option of sf.filteredSource">
{{option.value}}
</mat-option>
</mat-select>
</mat-form-field>
component.ts:
import {Observable} from "rxjs";
import {of} from 'rxjs';
export class MyComponent implements OnInit {
bankValue = [{key: 10, value: 'Bank_10'},{key: 75, value: 'Bank_75'}];
source: any[] = [];
ngOnInit(): void {
for (let i = 0; i < 100; i++) {
this.source.push({value: 'Bank\_' + i, key: i})
}
}
// server side mock search by 'of Observable'
bankSearcher = (search: string, pageNumber: number, pageSize: number): Observable<any[]> => {
return of(this.source.filter(w => w.value.includes(search)));
}
}
Input Properties
For better performance (especially in mobile), you must set
maximum record for showing the records
less than value of maxWidthForMobileView,
'mat-select' Will be displayed in 'FullScreen' or
'Bottom Sheet'