# ngx-global-mat-select

> ![npm](https://img.shields.io/npm/dw/ngx-global-mat-select) ![npm](https://img.shields.io/npm/v/ngx-global-mat-select)

Latest version **0.2.1** (published 2021-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-global-mat-select
pnpm add ngx-global-mat-select
yarn add ngx-global-mat-select
bun add ngx-global-mat-select
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-03-30 |
| First published | 2021-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 252.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nader_a |
| Keywords | select, mat-select, pagination, material |

## Links

- npm: https://www.npmjs.com/package/ngx-global-mat-select
- Homepage: https://github.com/Cloud-22/ngx-global-mat-select
- npm.io page: https://npm.io/package/ngx-global-mat-select

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [ngx-mat-select-search](https://npm.io/package/ngx-mat-select-search.md) ^3.2.0
- [ng-mat-select-infinite-scroll](https://npm.io/package/ng-mat-select-infinite-scroll.md) ^2.1.1

## Recent versions

- 0.2.1 (latest) — 2021-03-30
- 0.2.0 — 2021-03-28
- 0.0.13 — 2021-03-24
- 0.0.12 — 2021-03-24
- 0.0.11 — 2021-03-23
- 0.1.1 — 2021-03-17
- 0.1.0 — 2021-03-17

## README

# GlobalMatSelect
![npm](https://img.shields.io/npm/dw/ngx-global-mat-select)
![npm](https://img.shields.io/npm/v/ngx-global-mat-select)

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.

## What does it do ?
This package aims to add extra features to [Angular Material Select component](https://material.angular.io/components/select)
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   `<mat-form-field>`



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

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 


 
### Interfaces
- `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<any> 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<any>).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](https://github.com/angular/angular-cli/blob/master/README.md).

---
_Source: https://npm.io/package/ngx-global-mat-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._