Learn Angular 8 Step By Step in 10 Days Pipes Day 5

Learn Angular 8 Step By Step in 10 Days – Pipes (Day 5)

Welcome back to the Learn Angular 8 in 10 Days article series - Part 5. In the previous article, we discussed the different concept of directives in Angular. Now, in this article, we will discuss the Concept of Pipes. 

So, in this article, we will discuss the concept of Pipe in Angular 8. The Pipe is another important element of the Angular framework. Using pipe, we can decorate the data as per our desired format in the application. The main purpose of using pipes is to transform data within an HTML template.

What is Pipe?

When we want to develop any application, we always start the application with a simple task: retrieve data, transform data, and then display the data in front of the user through the user interface. Retrieval of data from any type of data source totally depends on data service providers like web services, Web API, etc. So, once data arrives, we can push those raw data values directly to our user interface for viewing by the user. 

But sometimes, this is not exactly what happens. For example, in most use cases, users prefer to see a date in a simple format like 15/02/2017 rather than the raw string format Wed Feb 15 2017 00:00:00 GMT-0700 (Pacific Daylight Time). So, it is clear from the above example that some values require editing before being viewed in the user interface. 

Also, that same type of transformation might be required by us in many different user interfaces. So, in this scenario, we think about some style type properties that we can create centrally and apply whenever we require it. So, for this purpose, the Angular framework introduced Angular pipes, a definite way to write display – value transformations that we can declare in our HTML.

In Angular 8.0, pipes are typescript classes that implement a single function interface, accept an input value with an optional parameter array, and return a transformed value. To perform the value transformation, we can implement any type of business logic as per our requirement. That pipe can be used in any UI to transform that particular type of data as per the desired result.

Basic Concept of Pipes

Basically, pipes provide a sophisticated and handsome way to perform the tasks within the templates. Pipes make our code clean and structured. In Angular, Pipes accept values from the DOM elements and then return a value according to the business logic implemented within the pipes. 

So, pipes are one of the great features through which can transform our data into the UI and display. But we need to understand one thing very clearly, that pipes do not automatically update our model value. It basically performs the transformation of data and returns to the component. If we need to update the model data after transformation through pipes, then we need to update our model data manually. Expect these, we can use pipes for any of the below reason –

• If we want to retrieve the position of the elements
• If we want to track the user inputs in input type elements
• If we want to restrict the user to input some value in the input controls

Why Pipe Required?

In any application, Pipe can be needed to use as per the following reason –

• We can display only some filtered elements from an array.
• We can modify or format the value.
• We can use them as a function.
• We can do all of the above combined.

Types of Pipe

In Angular 8, we can categories the pipes in two types i.e. Pure Pipes and Impure Pipes.

Pure Pipes:- Pure pipes in angular are those pipes which always accepts some arguments as input value and return some value as the output according to the input values. Some examples of the pure pipes are – decimal pipes, date pipes, etc. When we use these types of pipes in Angular, we provide input value with related configuration value to the pipes and pipes return us the formatted value as an output.

Impure Pipes:- Impure pipes in angular are those pipes which also accepts the input values, but return the different types of the value set according to the state of the input value. An example of the impure pipes is async pipes. These pipes always store the internal state and return different types of value as the output according to the internal state and logic.  

Filter vs Pipe

The concept of the filter is mainly used in the Angular 1.x version. From Angular 2 onwards, Google deprecated the Filter concept and introduced the new concept called Pipe. Now, as per the functionality, filter, and pipes, both are working like the same. But still, there are some differences as below –

1. Filters are acting just like helpers similar to function where we can pass input and other parameters and it will return us a formatted output value. In the case of a pipe, it works as an operator. It also accepts input value and modifies that value to return the desired output.
2. Filters can not handle directly any async type operations. We need to set those values manually. But Pipe can handle async operations on its own. For these types of operations, we need to use async type pipes. 

Basic Pipes

Most of the pipes provided by Angular 8 will be familiar with us if we already worked in the previous Angular version. Actually, pipes do not provide any new features in Angular 8. In Angular 8, we can use logic in the template. We can define any function within the pipe class to implement any special type data conversion or business login and then execute that particular function from the HTML template to obtain the desired result. 

The syntax of the Pipe in the HTML template begins with the input value and then followed the pipe symbol (|) and then need to provide the pipe name. The parameters of that pipe can be sent separately by a colon (:). The order of execution of a pipe is right to left. In General, Pipe is working within the HTML only. The most commonly used built-in pipes are:

• Currency
• Date
• Uppercase
• Lowercase
• JSON
• Decimal
• Percent
• Async

Syntax of Pipes

{{myValue | myPipe:param1:param2 | mySecondPipe:param1}} 

Custom Pipes

Now we can define custom pipes in Angular 8 as per our custom business logic. To configure custom pipes, we need to use a pipes object. For this, we need to define a custom pipe with the @Pipe decorator and use it by adding a pipes property to the @View decorator with the pipe class name. We use the transform method to do any logic necessary to convert the value that is being passed in as an input value. We can get a hold of the arguments array as the second parameter and pass in as many as we like from the template. The @Pipe decorator contains the below two properties –

1. name: It contains the name of the pipe which needs to be used in the DOM elements.
2. pure: It accepts the Boolean value. It identifies the pipe is a pure or impure pipe. The default value of the pure property is true i.e. it always considers the custom pipe is a pure type pipe. It means Angular Framework will execute a pure pipe only when it detects a pure change in the input value. Pure change data can be a primitive (means data contains only single values) or non-primitive (means data contains such data type which accepts a group of values). If we need to make the pipe as impure then we need to pass false as the value against this property. In the case of the Impure pipe, the Angular framework will execute the pipes on every component change detection cycle. In this case, the pipe is often called as often as every keystroke or mouse-move.

When we define any pipe class using @Pipe decorator, we need to implement the PipeTransforms interface which mainly used to accept the input values (optional values) and return the transform values to the DOM.

What is Viewchild?

Basically, Viewchild is one of the new features introduced in the Angular framework. Angular is basically depended on component-based architecture. So when we try to develop any web page or UI, it is most obvious that that page or UI must be a component that basically contains multiple numbers of different functional components as a child component. 

So in simple words, it is basically a parent component – child component-based architecture. In this scenario, there are some situations occurred when a parent component needs to interact with the child component. We can establish connections between parent and child components in many ways. One of the ways is ViewChild decorator. 

ViewChild decorator can be used if we need to access the instance of a child component or a directive from the parent component class. So when the need to invoke any method of the child component from the parent component, it can inject the child component as a Viewchild within the parent component. In cases where you’d want to access multiple children, you’d use ViewChildren instead.

To implement ViewChild, we need to use @ViewChild decorator in the parent component. The @ViewChild decorator provides access to the class of child components from the parent component. The @ViewChild decorator is basically a function or method which accepts the name of a component class as its input and finds its selector in the template of the related component to bind to. The basic syntax of the ViewChild decorator in Angular 8 as below –

@ViewChild(ChildComponent, { static:true}) _calculator: ChildComponent;

So, as per the above example, ViewChild decorator contains the following metadata:-

1. selector: It contains the directive or component name which need to use as view child
2. static: It accepts the Boolean value. We need to pass true as a value if we want to resolve the query result before change detection occurs. So, when we pass the value as true, then the Angular framework tries to locate that element at the time of component initialization i.e. in the ngOnInit method. If we pass the value as false, then Angular will try to find the element after the initializing of the view i.e. in the ngAfterViewInit method.  

Demo 1: Basic Pipes Demo

In this example, we will demonstrate how to use the inbuilt pipes in Angular 8.

app.component.ts

1. import { Component, OnInit } from '@angular/core';  
2.   
3. @Component({  
4.   selector: 'app-root',  
5.   templateUrl: './app.component.html',  
6.   styleUrls : ['./custom.css']  
7. })  
8. export class AppComponent implements OnInit {  
9.   public todayDate: Date;  
10.   public amount: number;  
11.   public message: string;  
12.   
13.   constructor() { }  
14.   
15.   ngOnInit(): void {  
16.     this.todayDate = new Date();  
17.     this.amount = 100;  
18.     this.message = "Angular 8.0 is a Component Based Framework";  
19.   }  
20. }  

app.component.html

1. <div>  
2.     <h1>Demonstrate of Pipe in Angular 8</h1>  
3.     <h2>Date Pipes</h2>  
4.     Full Date : {{todayDate}}<br />  
5.     Short Date : {{todayDate | date:'shortDate'}}<br />  
6.     Medium Date : {{todayDate | date:'mediumDate'}}<br />  
7.     Full Date : {{todayDate | date:'fullDate'}}<br />  
8.     Time : {{todayDate | date:'HH:MM'}}<br />  
9.     Time : {{todayDate | date:'hh:mm:ss a'}}<br />  
10.     Time : {{todayDate | date:'hh:mm:ss p'}}<br />  
11.   
12.     <h2>Number Pipes</h2>  
13.     No Formatting : {{amount}}<br />  
14.     2 Decimal Place : {{amount |number:'2.2-2'}}  
15.   
16.     <h2>Currency Pipes</h2>  
17.     No Formatting : {{amount}}<br />  
18.     USD Doller($) : {{amount |currency:'USD':true}}<br />  
19.     USD Doller : {{amount |currency:'USD':false}}<br />  
20.     INR() : {{amount |currency:'INR':true}}<br />  
21.     INR : {{amount |currency:'INR':false}}<br />  
22.   
23.     <h2>String Related Pipes</h2>  
24.     Actual Message : {{message}}<br />  
25.     Lower Case : {{message | lowercase}}<br />  
26.     Upper Case : {{message | uppercase}}<br />  
27.   
28.     <h2> Percentage Pipes</h2>  
29.     2 Place Formatting : {{amount | percent :'.2'}}<br /><br />   
30. </div>  

Now check the output into the browse –

Demo 2: Custom Pipe – Proper Case

Now, its time to define some custom pipe as per our requirement. Since in the above example, we see that in general Angular 8 framework provides us to UpperCase and LowerCase pipes against any string type value as in-build pipes. But, it does not provide any proper case type pipes. So, let's define a pipe that will transfer any string value as proper case and return the result. For that purpose, add the below typescript class files –

propercase.pipe.ts

1. import { Pipe, PipeTransform } from "@angular/core"  
2.   
3. @Pipe({  
4.     name: 'propercase'  
5. })  
6.   
7. export class ProperCasePipe implements PipeTransform {  
8.     transform(value: string, reverse: boolean): string {  
9.         if (typeof (value) == 'string') {  
10.             let intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();  
11.             return (reverse == false ? intermediate[0].toLowerCase() :  
12.                 intermediate[0].toUpperCase()) + intermediate.substr(1);  
13.         }  
14.         else {  
15.             return value;  
16.         }  
17.     }  
18. }  

Now, include the proper case pipe in the AppModule as below –

1. import { BrowserModule } from '@angular/platform-browser';  
2. import { NgModule } from '@angular/core';  
3. import { FormsModule } from '@angular/forms';  
4.   
5. import { AppComponent } from './app.component';  
6. import { ColorChangeDirective } from './app.directive';  
7. import { ProperCasePipe } from './propercase.pipe';  
8.   
9. @NgModule({  
10.   declarations: [  
11.     AppComponent,ColorChangeDirective,ProperCasePipe  
12.   ],  
13.   imports: [  
14.     BrowserModule,FormsModule  
15.   ],  
16.   providers: [],  
17.   bootstrap: [AppComponent]  
18. })  
19. export class AppModule { }  

app.component.ts

1. import { Component, OnInit } from '@angular/core';  
2.   
3. @Component({  
4.   selector: 'app-root',  
5.   templateUrl: './app.component.html',  
6.   styleUrls : ['./custom.css']  
7. })  
8. export class AppComponent implements OnInit {  
9.   public message: string;  
10.   
11.   constructor() { }  
12.   
13.   ngOnInit(): void {  
14.     this.message = "This is a Custom Pipe";  
15.   }  
16. }  

app.component.html

1. <div>  
2.     <div class="form-horizontal">  
3.         <h2 class="aligncenter">Custom Pipes - Proper Case</h2><br />  
4.         <div class="row">  
5.             <div class="col-xs-12 col-sm-2 col-md-2">  
6.                 <span>Enter Text</span>  
7.             </div>  
8.             <div class="col-xs-12 col-sm-4 col-md-4">  
9.                 <input type="text" id="txtFName" placeholder="Enter Text" [(ngModel)]="message" />  
10.             </div>  
11.         </div>  
12.         <div class="row">  
13.             <div class="col-xs-12 col-sm-2 col-md-2">  
14.                 <span>Result in Proper Case</span>  
15.             </div>  
16.             <div class="col-xs-12 col-sm-4 col-md-4">  
17.                 <span>{{message | propercase}}</span>  
18.             </div>  
19.         </div>  
20.     </div>  
21. </div>  

Now run the output into the browser -

Demo 3: Viewchild

Now, in this demo, we will discuss how to use ViewChild decorator within a component. For that purpose, first, need to create a child component that will be used as a ViewChild in the parent or root component.

child.component.ts

1. import { Component, OnInit, Output, EventEmitter } from '@angular/core';  
2.   
3. @Component({  
4.     selector: 'child',  
5.     templateUrl: 'child.component.html'  
6. })  
7.   
8. export class ChildComponent implements OnInit {  
9.     private firstNumber: number = 0;  
10.     private secondNumber: number = 0;  
11.     private result: number = 0;  
12.   
13.     @Output() private addNumber: EventEmitter<number> = new EventEmitter<number>();  
14.     @Output() private subtractNumber: EventEmitter<number> = new EventEmitter<number>();  
15.     @Output() private multiplyNumber: EventEmitter<number> = new EventEmitter<number>();  
16.     @Output() private divideNumber: EventEmitter<number> = new EventEmitter<number>();  
17.   
18.     constructor() { }  
19.   
20.     ngOnInit(): void {  
21.     }  
22.   
23.     private add(): void {  
24.         this.result = this.firstNumber + this.secondNumber;  
25.         this.addNumber.emit(this.result);  
26.     }  
27.   
28.     private subtract(): void {  
29.         this.result = this.firstNumber - this.secondNumber;  
30.         this.subtractNumber.emit(this.result);  
31.     }  
32.   
33.     private multiply(): void {  
34.         this.result = this.firstNumber * this.secondNumber;  
35.         this.multiplyNumber.emit(this.result);  
36.     }  
37.   
38.     private divide(): void {  
39.         this.result = this.firstNumber / this.secondNumber;  
40.         this.divideNumber.emit(this.result);  
41.     }  
42.   
43.     public clear(): void {  
44.         this.firstNumber = 0;  
45.         this.secondNumber = 0;  
46.         this.result = 0;  
47.     }  
48. }  

child.component.html

1. <div class="ibox-content">  
2.     <div class="row">  
3.         <div class="col-md-4">  
4.             Enter First Number  
5.         </div>  
6.         <div class="col-md-8">  
7.             <input type="number" [(ngModel)]="firstNumber" />  
8.         </div>  
9.     </div>  
10.     <div class="row">  
11.         <div class="col-md-4">  
12.             Enter Second Number  
13.         </div>  
14.         <div class="col-md-8">  
15.             <input type="number"  [(ngModel)]="secondNumber" />  
16.         </div>  
17.     </div>  
18.     <div class="row">  
19.         <div class="col-md-4">  
20.         </div>  
21.         <div class="col-md-8">  
22.            <input type="button" value="+" (click)="add()" />  
23.                 
24.             <input type="button" value="-" (click)="subtract()" />  
25.                 
26.             <input type="button" value="X" (click)="multiply()" />  
27.                 
28.             <input type="button" value="/" (click)="divide()" />  
29.         </div>  
30.     </div>  
31. </div>  

Now, include this child component in the app.module.ts file.

1. import { BrowserModule } from '@angular/platform-browser';  
2. import { NgModule } from '@angular/core';  
3. import { FormsModule } from '@angular/forms';  
4.   
5. import { AppComponent } from './app.component';  
6. import { ChildComponent } from './child.component';  
7.   
8. @NgModule({  
9.   declarations: [  
10.     AppComponent,ChildComponent  
11.   ],  
12.   imports: [  
13.     BrowserModule, FormsModule  
14.   ],  
15.   providers: [],  
16.   bootstrap: [AppComponent]  
17. })  
18. export class AppModule { }  

Now, use the above child component in the root component as below –

app.component.ts

1. import { Component,ViewChild } from '@angular/core';  
2. import { ChildComponent } from './child.component';  
3.   
4. @Component({  
5.   selector: 'app-root',  
6.   templateUrl: './app.component.html',  
7.   styleUrls : ['./custom.css']  
8. })  
9. export class AppComponent {  
10.   private result: string = '';  
11.   
12.     @ViewChild(ChildComponent, { static:true}) private _calculator: ChildComponent;  
13.   
14.     constructor() {  
15.     }  
16.   
17.     private add(value: number): void {  
18.         this.result = 'Result of Addition ' + value;  
19.     }  
20.   
21.     private subtract(value: number): void {  
22.         this.result = 'Result of Subtraction ' + value;  
23.     }  
24.   
25.     private multiply(value: number): void {  
26.         this.result = 'Result of Multiply ' + value;  
27.     }  
28.   
29.     private divide(value: number): void {  
30.         this.result = 'Result of Division ' + value;  
31.     }  
32.   
33.     private reset(): void {  
34.         this.result = '';  
35.         this._calculator.clear();  
36.     }  
37. }  

app.component.html

1. <h2>Demo of Viewchild</h2>  
2. <div>  
3.     <child (addNumber)="add($event)" (subtractNumber)="subtract($event)" (multiplyNumber)="multiply($event)"  
4.             (divideNumber)="divide($event)" #calculator></child>  
5. </div>  
6. <h3>Result</h3>  
7. <span>{{result}}</span>  
8. <br />  
9. <br />  
10. <input type="button" value="Reset" (click)="reset()" />  

Now, check the output in the browser –