Ngx pipes lite

Useful pipes for angular v14+.

Change notes.

Try get$ pipe.

Open get$ with paging pipes demo preview.

Installation

1. Install: npm i ngx-pipes-lite
2. Add to module or standalone component:

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

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

or

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

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

}
`

Pipes

$3

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

The result is a wrapper(Observable) 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}?

`shell
'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}
`

`angular2html




• 
  {{ item.title }}
  


`

> HttpClientModule is required.

$3

Truncate the long text.

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

`html


{{'1234567890abcdef' | trunc}}

{{'abcde' | trunc:3}}

{{'abcde' | trunc:3:*}}

`

$3

Simple array data paging pipe.

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

`html


{{[1,2,3,4,5,6,7,8,9,10] | paging}}

{{[1,2,3,4,5,6,7,8,9,10] | paging:2:3}}

`

$3

Math pipe of javascript Math .

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

Usage: number | number[] | math:Func

`html


{{[2, 3] | math:'pow'}}

{{[1, 2, 3] | math:'sum'}}

{{1.5 | math:'floor'}}

{{10 | math:'randomx'}}

`

$3

collect each object values by key.

Usage: any[] | zip

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

`html


{{input | zip}}



`

$3

objects group by key's value.

Usage: any[] | group:key

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

`html


{{input | group:'age'}}



`

$3

Return first value which not null and not undefined.

Usage: any[] | coalesce

`html


{{[null, 'b', 'c', 'd'] | coalesce}}



``