- This project uses ngx pipes to modify the data shown to the user in the html template.
- Note: to open web links in a new window use: ctrl+click on link
*** Note: to open web links in a new window use: ctrl+click on link**
- The ngx pipes can be used to modify strings, arrays, objects and use math and boolean operations.
- Also has a 'time ago' pipe but check if it only works with moment.js or if a lighter package like day.js can be used. It has only 1 dependancy. You only import the pipes you use, not a whole library.
- Angular framework v16
- Ionic/angular v7
- ngx pipes v3
- Angular Augury Chrome Extension v1 useful for debugging.
npm i
to install dependencies- Run
ionic serve
for a dev server. Navigate tohttp://localhost:8100/
. The app will automatically reload if you change any of the source files.
home.page.html
extract showing use of pipes to show array keys and values, date and max value (callPipe function).
<p>{{ myObj | keys }}</p> <!--name,age-->
<p>{{ myObj | values }}</p> <!--Andrew,49-->
<p>Today is {{ today | date }}</p>
<ion-button (click)="callPipe()">Call Pipe</ion-button>
callPipe() {
// this.datePipe.transform(Date);
alert(this.maxPipe.transform(this.numbers));
}
- ngx-pipes has no external dependencies. Pipes are injectable and can be used in Components / Services / etc.
- Status: Working.
- To-Do: Try other pipes.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com