slndr-elements
A small collection of minimalistic/slender angular pipes, directives and services
Installation
The library is published as a package of NPMJS weirdwizard account
npm install slndr-elements
If your app is not already using the packages listed below as peer dependencies please install them to your application.
Peer Dependencies
Besides, the default angular dependencies this module requires following packages as peer dependencies:
Pipes and Directives
markdownLink pipe
Converts a markdown link e.g. [I'm an inline-style link with title](https://www.google.com "Google's Homepage")
into real a href link. It can be used to "allow" links in plain text input elements like html textareas.
Usage
<div>{{result?.value|markdownLink}}</div>
or if you want to open in it place (instead of new popup)
<div>{{result?.value|markdownLink,true}}</div>
ifNil pipe
If the value is null/undefined display an alternative text
Usage
<div>{{result?.value|ifNil:'--'}}</div>
If an empty string or empty collection should also show the alternative text then add true
as last parameter
<div>{{result?.value|ifNil:'--':true}}</div>
wrapIfNotEmpty pipe
If the value is not null/undefined/empty than wrap it with a prefix or postfix something
Usage
<div>{{result?.value|wrapIfNotEmpty:'[',']' }}</div>
Above would should e.g. [yourtext] if result?.value is not empty. If the value is null/undefined or empty nothing would be shown.
If also an empty value should be wrapped, add a last parameter with false
. There is still no wrapping for null/undefined of course.
<div>{{result?.value|wrapIfNotEmpty:'[',']':false }}</div>
Above would should e.g. [yourtext] if not null and nothing if null
disableControl directive
This directive can be used to add the functionality to disabling form controls when working with reactive forms in angular.
With the default [disable] tag, you get the message:
It looks like you’re using the disabled attribute with a reactive form directive.
If you set disabled to true in the control in your component class,
the disabled attribute will actually be set in the DOM for you.
We recommend using this approach to avoid ‘changed after checked’ errors.
This can be used if you don't want to disable/enable the control
in code like formControl.disable() or formControl.enable() or new FormControl({value: '', disabled: true})
Usage
<input matInput formControlName="coolName" [disableControl]="isDisabled">
disableComponent directive
This is the same as disableControl directive but this does not work with material controls (TODO: talk to developer if that was the real reason)
Usage
<input matInput formControlName="coolName" [disableComponent]="isDisabled">
Services
BrowserLocationService
A service to access the browsers window.location object. It is very handy if you want to write unit tests.
The interface is like https://developer.mozilla.org/en-US/docs/Web/API/Location