GlobalMatSelect

!npm
!npm

This library was generated with Angular CLI version 10.1.6.

What does it do ?

This package aims to add extra features to Angular Material Select component
through combining multiple functionalities from Angular Material, ngx-mat-select-search and ng-mat-select-infinite-scroll.
to provide the following easy-to-configure features:

- 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

How to use it in your project

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
[options]="options"
[config]="cfg"
[formControl]="..."
(infiniteScrollLimit)="getNewOptionsAndPushToOptionsArr()"
>
`

With the following Inputs




Options Input

| Property | Type | Description | Required | Notes
| ----------- | ----------------------------------- | ---------------------------------------------- | --------- | ------
|options | GlobalMatSelectOptionsInterface[] | Array of available options to select from | True |

Config Input

The config object should be of type GlobalMatSelectConfig 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.