Useful standalone pipes for angular14+.
npm install ngx-pipes-liteUseful pipes for angular v14+.
get$ pipe.Open get$ with paging pipes demo preview.
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 {
}
`
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 asyncObservable<{success: boolean, data?: any | any[], message: string, valid: boolean}>
pipe**.
ResultWrapper:
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.
Truncate the long text.
Usage: string | trunc:length?=15:replace?='...'
` {{'1234567890abcdef' | trunc}}html
{{'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}}
``