NgxMaterialToolsDemo
Updated to Angular 14
#### This is a set of custom directives lib for Angular Materials.
For now it contains only matInputCommified directive to be used with standard material matInput.
How to use
#### Install package
``
npm i ngx-material-tools
#### Import module
`
...
import {NgxMaterialToolsModule} from 'ngx-material-tools';
@NgModule({
...
imports: [
...
NgxMaterialToolsModule
],
...
})
export class AppModule { }
`
$3
#### Use matInputCommified directive together with matInput in Angular Reactive Forms
`
angular2html
>
`
#### matInputCommified demo
!demo app
$3
It allows to monitor if scroll appear on specific element (and change other elements layout respectively if needed).
In particular: sometimes if scroll appears some elements alignment may need change (for examples labels above the container may be shifted to compensate scrollBar width)`
angular2html
Scroll status: {{scrollable.data | json}}
`
1. Put attribute directive _scrollWatch_ directive on specific html element
2. assign directive instance axported as _scrollDetails_ to any ref variable (#scrollable="scrollDetails")
3. Use that variable in scope of template (for example to correct margin of element above)
#### scrollWatch directive demo
!demo app
Provided data interface
`
typescript
export interface ContainsScrollEvent {
hasHorizontalScroll: boolean;
hasVerticalScroll: boolean;
verticalScrollBarWidth: number;
horizontalScrollBarWidth: number;
};
`
$3
You can also control specific container scrollBar visibility to a _containsScroll_ pipe.
It returns Observable which emit scrollBar data, so use Angular _async_ to read them.But I recommend to use _scrollWatch_ directive since each time you use pipe in template - new instance of MutationObserver is created.
`
angular2html
Scroll status: {{(scrollable | containsScroll | async) | json}}
`
Check demo app for details$3
Clone this repo and do npm install
`
npm installng serve
``
Go to http://localhost:4200
Did you Like this lib? Follow me on Twitter for more Angular and RxJS staff!
Need a mentorship for Angular and RxJS? Find me on codementor.io
Take a look at my video-course on Udemy/PacktPub:
* "Hands-on RxJS for Web Development"
* "RxJS unit testing for Angular apps"
Check my Youtube video-blog "Angular can waste your time!"
*This project was generated with Angular CLI version 8.3.14.