<mat-select>
is a form control for selecting a value from a set of options, similar to the native element. You can read more about selects in the Material Design spec. It is designed to work inside of a element.
ββAngular Material Docs
MatSelect API is robust having vast capabilities, but there's an issue here.
What if my DATASET is very large, should I load it all into my mat-select
component.
Sure not , it'll slow down my app!
My data should be lazy loaded i.e. I load part of my data and do load more when I only need it. In case of select
controls, things must be done as of infinite scroll manner , where you load extra content when you reach the bottom of the options scroll panel.
That's why I've created the angular library ng-mat-select-infinite-scroll to handle big dataset issues with angular material select.
If you're familiar with angular , this library is easy to use , it represents an angular directive with some input properties.
Getting Started
npm i ng-mat-select-infinite-scroll --save
Import MatSelectInfiniteScrollModule
inside the app.module.ts
import { MatFormFieldModule, MatSelectModule } from '@angular/material/select';
import {MatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatSelectModule,
MatSelectInfiniteScrollModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Then place the msInfiniteScroll
directive on the mat-select
component
<mat-form-field appearance="outline">
<mat-label>Select</mat-label>
<mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length">
<mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option>
</mat-select>
</mat-form-field>
In the above example , whenever we reach the bottom of the select panel , infiniteScroll
event will be called and it will still doing that until
the complete
input is set to true
.
Suppose that you have a paginated API, you'll keep fetching until the count of options in the select is equal the total number of the resource.
Parameters
Inputs
Property | Description | Type | Default |
---|---|---|---|
complete |
If true , the infinitScroll output will no longer be triggered |
boolean |
false |
threshold |
The threshold distance from the bottom of the options list to call the infiniteScroll output event when scrolled. The threshold value can be either in percent, or in pixels. For example, use the value of 10% for the infiniteScroll output event to get called when the user has needs 10% to reach the bottom. |
string |
'15%' |
debounceTime |
The threshold time before firing the infiniteScroll event |
number |
150 |
Outputs
Property | Description | Type |
---|---|---|
infinitScroll |
Emitted when the scroller inside the mat-select reaches the required distance |
EventEmitter<void> |
For a full example , please have a look at StackBlitz working example.
Don't forget to keep a star for my repository if you liked it :)
ng-mat-select-infinite-scroll
Top comments (3)
Actually I have used this msInfiniteScroll with Mat-Select. For Rendering, it is working fine, but in case of edit that field, I am unable to show value selected(Suppose that value comes in 3rd page(Comes while scrolling)).
Good Job π