Collection of components that adds extra functionality to angular material
npm i @pqsdev/ngx-mat-extras
## 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
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
Child component of angular material select that allows to filter from a data source.
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> |
setSelectedData
abstract method must be overrides in the implementations. The main goals is to emit a value with selectedDataSubject$
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' }
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
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
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
Adds missing infinite scroll functionality for the angular material select component.
Based on HaidarZ/ng-mat-select-infinite-scroll
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 |
Property | Description | Type |
---|---|---|
infiniteScroll |
Emitted when the scroller inside the mat-select reaches the required distance |
EventEmitter<void> |