ngx-pipes-lite

Ngx pipes lite

Useful pipes for angular v14+.

Change notes.

Try get$ pipe.

Open get$ with paging pipes demo preview.

Installation

• Install: npm i ngx-pipes-lite
• Add to module or standalone component:

import {AjaxGetJsonPipe} from "ngx-pipes-lite";

@NgModule({
  // ...
  imports: [
    // ...
    AjaxGetJsonPipe
  ]
})

or

import {AjaxGetJsonPipe} from "ngx-pipes-lite";

@Component({
  // ...
  imports: [
    AjaxGetJsonPipe
  ]
  // ...
})
export class AppComponent {

}

Pipes

get$

Simple http GET JSON request pipe for angular template, display the ajax result quickly and lightly.

The result is a wrapper(Observable<ResultWrapper>) of your result from the api, SO get$ always work with async pipe. ResultWrapper: Observable<{success: boolean, data?: any | any[], message: string, valid: boolean}>

ResultWrapper#data: your actual result.

ResultWrapper#valid: result.data is not null, undefined, length > 0(array) and {field:...}(object).

Usage: string | get$:{args}?:{options}?

'api' | get$ # actual request: api
'api' | get$:{a:1,b:2} # actual request: api?a=1&b=2
'api' | get$:{a:1,b:2}:{headers:{Authorization:'xxx'}} # actual request: api?a=1&b=2 with header {Authorization: xxx}

<ng-container *ngIf="'https://jsonplaceholder.typicode.com/todos' | get$ | async as result">
    <ul *ngIf="result.valid">
        <li *ngFor="let item of result.dataAsArray">
            {{ item.title }}
        </li>
    </ul>
</ng-container>

<!-- 
<p>delectus aut autem</p>
<p>quis ut nam facilis et officia qui</p>
<p>fugiat veniam minus</p>
... 
-->

HttpClientModule is required.

trunc

Truncate the long text.

Usage: string | trunc:length?=15:replace?='...'

<p>{{'1234567890abcdef' | trunc}}</p>
<!-- string: 1234567890abcde... -->

<p>{{'abcde' | trunc:3}}</p>
<!-- string: abc... -->

<p>{{'abcde' | trunc:3:*}}</p>
<!-- string: abc* -->

paging

Simple array data paging pipe.

Usage: [] | paging:page?=1:size?=10

<p>{{[1,2,3,4,5,6,7,8,9,10] | paging}}</p>
<!-- Array: [1,2,3,4,5,6,7,8,9,10] -->

<p>{{[1,2,3,4,5,6,7,8,9,10] | paging:2:3}}</p>
<!-- Array: [4,5,6] -->

math

Math pipe of javascript Math .

The input args of 1 number or number array depends on Math function.

Usage: number | number[] | math:Func

<p>{{[2, 3] | math:'pow'}}</p>
<!-- number: 8 -->

<p>{{[1, 2, 3] | math:'sum'}}</p>
<!-- number: 6 -->

<p>{{1.5 | math:'floor'}}</p>
<!-- number: 1 -->

<!-- Additional -->
<p>{{10 | math:'randomx'}}</p>
<!-- number: Math.random() * 10 -->

zip

collect each object values by key.

Usage: any[] | zip

input = [
  {id: 1, name: 'cyx', age: 11},
  {id: 2, name: 'abc', age: 21},
  {id: 3, name: 'jack', age: 31}
]

<p>{{input | zip}}</p>
<!--
{
  id: [1, 2, 3],
  name: ['cyx', 'abc', 'jack'],
  age: [11, 21, 31]
}
-->

group

objects group by key's value.

Usage: any[] | group:key

input = [
  {age: 11, name: 'cyx'},
  {age: 11, name: 'jack'},
  {age: 23, name: 'abc'}
]

<p>{{input | group:'age'}}</p>
<!--
{
  11: [{age: 11, name: "cyx"}, {age: 11, name: "jack"}],
  23: [{age: 23, name: "abc"}]   
}
-->

coalesce

Return first value which not null and not undefined.

Usage: any[] | coalesce

<p>{{[null, 'b', 'c', 'd'] | coalesce}}</p>
<!--
'b'
-->