Angular Pipes — #1

Hello everyone,

With the encouragement of my mentor and great friend Thiago Adriano, I decided to start a series of articles about my journey of technological studies.
This week to start things off I will introduce Angular Pipes.

So let’s see what we can do…

What is Angular Pipe?

A brief introduction.

Pipes are used to transform, currency amounts, dates and a lot of data for display.
They are simple functions to use in template model to accept a enter value and return a transformed value.
It very useful because we can use in all application and declare just one time.

Angular provides integrated pipes about typical data, including locale transformations, follow some commom pipes:

Date: formate date according to local rules
Uppercase: transform text in upper case
Lowecase: transform text in lower case
Currency: transform a number to a currency string, according to local rules
Decimal: provide decimal point, according to local rules
Percent: transform number to percentage string

Follow ahead, let’s the two examples of custom pipes and how we can implement it.

Using Angular CLI.

ng g new pipe-test
ng g c pipestest

Create a folder to alocate your pipes and we have something like that?

Once we have created your files to present the pipes, let’s create two custom pipes:
1 — CPF and CNPJ

ng g p cpf-cnpj

I’ll not enter in details about Regex (Regular Expression), but as you can see below we use to replace characters equal to 11 to cpf and equal to 14 to cnpj, returning expressions with the correct expression.

2 — Converting Fahrenheit temperature to Celsius or Celsius to Fahrenheit

PS: Note that both pipes we have implemented PipeTransform ( it is a interface that is call by pipes to perform a transformation. Angular invokes that methos to binding the first value to any parameter to the second.

As result of this Pipes we have the following:

The #1, we have a regular pipe from angular, and about #2 and #3 Custom Pipes.
As you can note, on column of Raw Data is the raw data that we can input or receive from a API, and the Pipe Trnasform is the result treated by a pipe

Follow HTML to see how we call the pipes.

Do not forget to import the pipes on App.Module to use on HTML.

So this is it fellows, I will focus on post more articles about angular and another techs.

Until the next..byee