@pqsdev/ngx-mat-extras

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>