Giter Club home page Giter Club logo

pqs-mat-extras's Introduction

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.

Datasoruce

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>

pqs-mat-extras's People

Contributors

pqsar avatar yuudj avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.