@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>