 
This library was generated with Angular CLI version 10.1.6.
- Local filtering through available options
- Server side options filtering (Live Search) through HTTP requests
- Supporting infinite scroll to load long lists of options
- Full compatibility with Material Form Field Component
Install npm i global-mat-search
then import GlobalMatSelectModule in app.module.ts
``TypeScript
import {NgModule} from "@angular/core";
import {GlobalMatSelectModule} from "ngx-global-mat-select";
@NgModule({
declarations: [ ],
imports: [
GlobalMatSelectModule,
],
providers: [],
bootstrap: []
})
export class AppModule { }
`
In the template use selector
`html`
[config]="cfg"
[formControl]="..."
(infiniteScrollLimit)="getNewOptionsAndPushToOptionsArr()"
>
With the following Inputs
and implements the following props
| Property | Type | Description | Required | Notes
| ----------- | ----------------------------------- | ---------------------------------------------- | --------- | ------
|label | string | Label value to view above the select input | False |
|placeholder | string | Placeholder value to view in the select input | False |
|searchPlaceHolder | string | Placeholder value to view in the search input | False |
|enableMultiSelect | boolean | Enable multi-options select | True |
|liveSearchConfig | GlobalMatSelectLiveSearchConfigInterface | Configuration to apply live search | False |
|enableLiveSearch | boolean | Enable Live-search to an external API | True |
|enableLocalSearch | boolean | Enable Local-search | True | One type of search should be explicitly true
|totalOptionsLength | number | Used to stop Infinite scroll Event emitting if
`totalOptionsLength <= options.length` (Reached the end of available data | False | The pagination event wont emit if the user is searching for options using Local or Live search
$3
- GlobalMatSelectOptionsInterface used to force all options to have the following props
`
{
text: string
value: any
}
`
-
GlobalMatSelectLiveSearchConfigInterface used to config server side options filtering, should implement the following props
`
{
/**
* @description URL used to execute server side search
*/
liveSearchURL: string;
/**
* @description enable QueryString search
*/
isQueryStringSearch: boolean;
/**
* @description querySearch Config, Must be fulfilled if isQueryStringSearch == True
*/
queryConfig?: {queryString: string,}
/**
* @description enable Header search, else regular URL variable search
*/
isHeaderSearch: boolean;
/**
* @description headerSearch Config, Must be fulfilled if isHeaderStringSearch == True
*/
headerConfig?: {headersString: string}
/**
* @param res Response from the liveSearchURL API
* @description Mapping function used to map the API response to OptionsInterface Array
*/
liveResultMappingFunc(res): GlobalMatSelectOptionsInterface[];}
`
#### Example of using
liveResultMappingFunc `js
liveResultMappingFunc(data: any): GlobalMatSelectOptionsInterface[] {
return (data as Array).map(item => ({value: item.id, text: item.title}));
} `Run
ng build global-mat-select to build the project. The build artifacts will be stored in the dist/ directory.
#### Further help
To get more help on the Angular CLI use
ng help` or go check out the Angular CLI README.