@ngserveio/pipes
v9.0.0
Published
Find more at libraries and examples at [NgServe.io](https://ngserve.io).
Downloads
125
Readme
@ngserveio/pipes
Find more at libraries and examples at NgServe.io.
Running unit tests
Run nx test shared-ui-pipes
to execute the unit tests.
Purpose
Provide extra pipes for the UI purposes.
BytesPipe
Allows the number of bytes to be calculated to bytes
, kilobytes
, megabytes
, and gigabytes
. If you're transferring anything more than gigabytes
I'll question whether the browser is the correct place to do it.
Usage of the bytes pipe.
// Angular Template
{{ bytesCount | bytes }}
<!--
8 B - for Bytes
8 KB - for Kilobytes
8 MB - for megabytes
8 GB - for gigabytes
-->
DefaultIfEmpty
Rather than using the null collascing syntax of obj?.prop1?.prop2
with logic of an ||
this can check if the vlaue is empty and return a default value provided.
obj = {
a: {
name: 'hi',
},
};
// Angular Template {{ obj | defaltIfEmpty: 'a.name' : 'No Name Provided' }} //
Output: 'hi' {{ obj | defaultIfEmpty: 'a.c' : 'No Name Provided' }} // Ouput:
'No Name Provided'
GroupByPipe
Returns an array of { key: string, value:[] }[]
.
const testItems = [
{ id: '1', name: 'S', value: 1234, obj: { name: 'a' } },
{ id: '2', name: 'S', value: 12345, obj: { name: 'b' } },
{ id: '3', name: 'T', value: 123456, obj: { name: 'c' } },
{ id: '4', name: 'V', value: 1234567, obj: { name: 'd' } },
{ id: '5', name: 'S', value: 123451234, obj: { name: 'e' } },
];
<ul>
<li *ngFor="let value of testItems | groupBy: 'name'">
{{ value.key }} // first value `S` {{ value.value.length }} // length would
be 3
</li>
</ul>
TrackByKeyPipe
Used in conjunction in the trackBy
of an ngFor
directive allowing the developer to control what items of an array can be used to track changes.
If it can't fine the particular key, it will default to the index
.
const testItems = [
{ id: '1', name: 'S', value: 1234, obj: { name: 'a' } },
{ id: '2', name: 'S', value: 12345, obj: { name: 'b' } },
{ id: '3', name: 'T', value: 123456, obj: { name: 'c' } },
{ id: '4', name: 'V', value: 1234567, obj: { name: 'd' } },
{ id: '5', name: 'S', value: 123451234, obj: { name: 'e' } },
];
<ul>
<li *ngFor="let value of testItems; trackBy: ('id' | trackByKey)">
{{ value.name }}
</li>
</ul>
markdown
Converts the string to a dom sanitized HTML string from markdown
<div>{{ value | markdown }}</div>