⚡ Ionic ngx pipes

• 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**

📄 Table of contents

• ⚡ Ionic ngx pipes
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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.

📷 Screenshots

📶 Technologies

• Angular framework v16
• Ionic/angular v7
• ngx pipes v3
• Angular Augury Chrome Extension v1 useful for debugging.

💾 Setup

• npm i to install dependencies
• Run ionic serve for a dev server. Navigate to http://localhost:8100/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• 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));
}

🆒 Features

• ngx-pipes has no external dependencies. Pipes are injectable and can be used in Components / Services / etc.

📋 Status & To-Do List

• Status: Working.
• To-Do: Try other pipes.

👏 Inspiration

• Ionic Academy: How to Simplify your Ionic 4 App with ngx-Pipes.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com