How to Simplify your Ionic App with ngx-Pipes [v4]

ionic-ngx-pipes

Ionic already comes with some helpful utilities for converting strings or adding padding to elements, and Angular as well has a bunch of awesome built in pipes, but sometimes you might need more than just that.

For everyone looking for more advanced pipes to easily convert your strings, arrays or apply useful functionality, we will inspect the ngx-pipes package in this Quick Win!

Setting up the app with ngx-pipes

We are using a simple demo project to try our pipes, so simply run the following to setup a project with the package:

Whenever you need to use one of the pipes inside a page you will have to import the NgPipesModule to the module file of your page (not the main module).

Also, if you want to use specific pipes from code you have to add that specific pipe to the array of providers in the module as well like we did on the example of the MaxPipe.

So go ahead and change your home/home.module.ts to:

That’s the only thing you need to do whenever you need one fo the pipes of the package in one of your pages!

Using ngx-pipes

Let’s use a few of the pipes now! But first we might need some data for testing things out, and we’ll also only apply a few of the pipes.

You can find all of the awesome pipes documented on this page!

Our class also holds the code to use a pipe directly from there, it’s basically the same like importing a normal Angular pipe and using the transform() function on it. In this example we are using the MaxPipe which will give us the max of all elements of an array.

Go ahead and change the home/home.page.ts to:

Now we got some testing data so we can apply a few of the pipes on our data.

The usage of the package is really the same like with any other pipe – you just need to look up which pipe you need in the documentation. There are really a lot of great pipes, some might not be needed with Ionic but especially the array and object pipes are great!

In general the pipes fall into 5 categories:

  • String transformations
  • Array functionalities
  • Object operations
  • Math calculations
  • Boolean checks

So let’s see a few of them in action by changing our home/home.page.html to:

We just picked a few useful pipes and here’s what they do:

  • shorten: Cut a string after the amount of characters and append a string like ‘…’
  • trim: The classic Javascript trim to remove spaces from start and end of a string
  • initial: Slice off n items from the end of an array
  • reverse: Reverse the items of an array
  • keys / values: Return all the keys or values of an object

This is really just a small example and the cool thing is that you can of course also chain pipes like you are used to!

With this you are able to apply solid transformations to your data without writing additional functions.

Conclusion

The ngx pipes package is an awesome addition to your Ionic app without any external dependencies but a lot of helpful tools that you can use directly in your app without any big setup!

You can also find a video version of this Quick Win below.

Comments on How to Simplify your Ionic App with ngx-Pipes [v4]

Leave a Reply

Your email address will not be published. Required fields are marked *