Why I Chose My Journey To Angular
Transform data with Pipes
“Pipe It!!”
Episode 3
In my last episode we saw how Angular performs the data binding within its application. Today we are going to see the transformation of data in data binding.
All the time we do not want to get the data as it is bound to the template. In some cases we wish to avoid the unnecessary data and change the format of the data based on our business requirements. So in this tutorial we are going to see how Angular provides some structural directives which can change the DOM’s structure and transformation of data. So first We are going to look at structural directives,
- NgIf
- NgFor
The shortcut for the following directives are *ngIf, *ngFor in Angular. Here the asterisk in front of the directive’s name shows it is a structural directive.
NgIf directive is used to decide whether to add or remove the elements to the DOM. *ngIf= “flag” when the flag is true, the DOM tree includes the element. If the flag(expression assigned to structural directive) is a false value then the element and its children are removed from the DOM tree.
Here NgIf directive is used in table element where the value for files and the files list length exist only, the table will appear in the DOM. If not, then the table element and its children elements will be removed from the DOM.
NgFor structural directive is used for an iteration expression. NgFor repeats a part of the DOM tree once per each item in an iterable list. In the template we define the HTML for display a single item, Angular will use that block of HTML for displaying each item in the list.
“let” keyword here creates a template input variable called file. We can refer this variable anywhere on this element and its child elements. You should keep an eye that “of” is there instead of “in”.
Have you ever thought how Angular knows these structural directives?. Yes it imports the BrowserModule which exposes these NgIf and NgFor directives.
Let see the transformation of data…
You may come across the word “pipe” which plays the role in transforming data into whatever the format we want to. Pipes transform bound properties before displaying data into the template.
Angular supports two main types of pipes, built-in pipes and custom pipes.
Built-in pipe
Angular has pre-developed built-in pipes to transform and format strings, currency amounts, dates and other displaying data. Commonly used built-in pipes are
DatePipe
UpperCasePipe
LowerCasePipe
CurrencyPipe
DecimalPipe
PercentPipe
To apply a pipe, we use the pipe operator (|) within a template expression.
Here, the above stated template expression transforms the amount to currency.
We can chain pipes when needed. The above example shows that the product price will be displayed with the default currency notation in lowercase.
We can use optional parameters to fine tune a pipe’s output. In the above template expression parameters are defined by specifying a colon and the parameter value. Here three parameters desired currency code, currency symbol and digitsInfo for decimal representation.
Custom pipe
We can create our own pipe using Angular CLI command
ng generate pipe
for example ng generate pipe sampleCustomPipe
When we execute the above line in command line, below typescript file is generated.
Here we can see, a class named SampleCustomePipe was created which implements the interface PipeTransform that is used to transform the data with the use of pipe in Angular. You can notice a method transform(), which accepts the real value that needs to be transformed. We can include the format of data which we want to get in this class and can use it as how we use the built-in pipe.
for example
<p>{{name | sampleCustomPipe: ‘Mr.’}}</p>
Here the name will have the string “Mr.” with the value passes in the transform(). For example Output will be Mr. Royal.
In my next episode I will play you Angular services and dependency injection. See you!!!
