PQS ANGULAR MATERIAL EXTRAS

Collection of components that adds extra functionality to angular material

Installation

npm i @pqsdev/ngx-mat-extras

Coding

## clone this repo
git clone https://github.com/pqsdev/pqs-mat-extras.git
cd ./pqs-mat-extras
## install dependencies
npm i
## vscode debug is configured also
ng serve #louches the example proyect

ODATA - DATASOURCE

Implementation of CDK's DataSource that can work with ODATA version 4. It supports sorting with mat-sort and pagination with mat-paginator as well as per column filtering. Based on Marcin Suty's odata-data-source

MAT-SELECT-FILTER

Child component of angular material select that allows to filter from a data source.

MatSelectFilterDataSource

Abstract data data source for mat-select-filter. Implement it for custom data source

| Property | Description | Type | Default | | ---------------------- | -------------------------------------------------------------------- | ----------------------------- | ----------- | | txtFilter | Gets/sets the text filter value | string | '' | | idFilter | Gets/ sets the id text filter value (used to the selectedValue) | any | undefined | | dataSubject | Emits value every time the filtered data changes | BehaviorSubject<T[]> | [] | | loading | Emits true when loading false when finished or error | Observable<boolean> | | | errors | Emits value if there is an error | Observable<any> | | | selectedValueChanged | Emits a value with the object associated with the selected key value | Observable< T \| undefined> | |

setSelectedDataabstract method must be overrides in the implementations. The main goals is to emit a value with selectedDataSubject$

Selected Key != Selected Value

Selected Key is a primitive value of the key property (string, number, etc.) . The selected Value is the object which complies with the following object[<<key-porperty>>] == keyValue, in most cases.

Example SelectedKey = 32 Selected value = {ProductID: 32, ProductName: 'Noodles' }

MatSelectFilterODataSource

Abstract ODATA data source for mat-select-filter . Implement it for custom filtering. See examples for interaction with mat-paginator and matSelectInfiniteScroll

| Properties | Description | Type | Default | | ------------- | ------------------------------------------------------------------------------------------- | ------------------------------------- | ------- | | url | Resource location URL | string | '' | | isEnabled | When false the data source will not trigger new HTTP GET to the resource URL | boolean | true | | filters | Aditional filters, the interface IODataFilter allows to implement custom logic in filters | IODataFilter \| null | null | | page | Incremental page number, ignored if paginator is set. | number | 0 | | pageSize | Incremental page size, ignored if paginator is set . | number | 0 | | paginator | Paginator (reused from @angular/material) for paging inside the mat-select | MatTableDataSourcePaginator \| null | null | | count$ | Total item being listed  (Useful for incremental paging) | Subject<number> | | | countTotal$ | Total count of items  (Useful for incremental paging) | Subject<number> | | | completed$ | No more item to list (Useful for incremental paging) | BehaviorSubject<boolean> | false |

(**)**NESTED OBJECTS PROPERTIES ARE NOT SUPPORTED

MatSelectFilterFastODataSource

Simple implementation of MatSelectFilterODataSource.

Constructor

| Parameter | Description | Type | Default | | ---------------- | -------------------------------------------------------------------- | ---------------------- | ------- | | filterProperty | The data source will filter the input text with this property.  (**) | string | string[] | | | keyProperty | Used to set the value of the control. | string | |

(**)NESTED OBJECTS PROPERTIES ARE NOT SUPPORTED

MatSelectFilterObservableDataSource

implementation of MatSelectFilterDataSource that's allows a Observable data source.

Constructor

| Parameter | Description | Type | Default | | ---------------- | -------------------------------------------------------------------- | ------------------------ | ------- | | source | Observable source | Observable<T[]> \| T[] | | | filterProperty | The data source will filter the input text with this property. (***) | string | | | keyProperty | Used to set the value of the control. | string | |

(***)Nested properties are allowed see https://lodash.com/docs/4.17.15#get

MAT-SELECT INTINITE SCROLL

Adds missing infinite scroll functionality for the angular material select component.

Based on HaidarZ/ng-mat-select-infinite-scroll

Inputs

| Property | Description | Type | Default | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------- | | complete | If true, the infiniteScroll 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 | | ---------------- | ------------------------------------------------------------------------------- | -------------------- | | infiniteScroll | Emitted when the scroller inside the mat-select reaches the required distance | EventEmitter<void> |