Learn Angular 4.0 In 10 Days - Pipes And ViewChild - Day Five

Let us start the Day 5 of Learning Angular 4.0 in 10 Days Series. In the previous articles, we already discussed Directives in Angular 4.0. If you want to read the previous articles of this series, do visit the below link.

• Learn Angular 4.0 in 10 Days - Day 1
• Learn Angular 4.0 in 10 Days - Component - Day 2
• Learn Angular 4.0 in 10 Days - Data Binding - Day 3
• Learn Angular 4.0 in 10 Days - Directives - Day 4

When we want to develop an application, we always start the application with a simple basic common task; i.e., retrieve data, transform data and then display the data in front of the user through our user interface. Retrieving data from any type of data source totally depends on data service providers like web services, web APIs etc. So once data has arrived, we can push those raw data values directly to our user interface for viewing to the user. But sometimes, this does not happen exactly in the same manner. 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 value requires editing before getting viewed into the user interface. Also, it can be noticed that the same type of transformation is required by us in many different user interfaces or vice versa. So, in this scenario, we need to think about some style type property which we can be created centrally and applied whenever we require it globally. So for this purpose, Angular 4 introduces Angular Pipes, a definite way to write display – value transformations that we can declare in our HTML.

What are Pipes?

In Angular 4.0, Pipes are classes implementing a single function interface, accepting an input value with an optional parameter array, returning a transformed value.

Transition From Filter to Pipes

In Angular 1.x, we are familiar with the term filter. Filters are a great way of returning a new collection of data or formatting the new. Filters are basically just a function, which take a single value or collection of values as input and returns a new value or collection of values based on the logical responsibilities. In Angular 4.0, pipes are the modernized version of filters. Most of the inbuilt filters of Angular 1.x have been converted as pipes in Angular 4.0 with some new pipes. Pipes are accessed in our templates in the same way that filters were--with the "pipe" character |. Below table shows the comparison of pipes or filters in both Angular 1.x and Angular 4.0.

In Angular 1.x version, filters are very helpful for formatting any type of value as output in our templates. So with Angular 4.0, we get the same feature, but now it is known as Pipes. Below table shows the comparison of pipes or filters in both Angular 1.x and Angular 4.0.

Filter / Pipes Available	Angular 1.x	Angular 4.0
currency	P	P
date	P	P
uppercase	P	P
lowercase	P	P
Json	P	P
limitTo	P	P
Number	P
orderBy	P
Filter	P
async		P
decimal		P
percent		P

So we can called Pipes as an modernized version of Filters in Angular 1.x.

Why Pipes?

Actually, Pipes do not give any new feature in our template. In Angular 4.0, we can use logic in the templates also. We can also execute or called a function to obtain the desired value in the template. Basically, pipes provide a sophisticated and handsome way to perform the above task within the templates. Basically, pipes make our code clean and structured.

Syntax of Pipes

1. myValue | myPipe:param1:param2 | mySecondPipe:param1

The pipe expression or syntax starts with the value followed by the symbol pipe (|), then the pipe name. The params for that pipe can be sent separated by colon (:) symbol. The order of execution is from left to right. However, the pipe operator only works in your templates and not in JavaScript code. In JavaScript, the pipe symbol works as a bitwise operator.

Uses of Pipes

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

 

Filters vs Pipes

In Angular 1.x, filters act as helpers, actually very similar to functions where we can pass the input and other parameters and it returns a formatted value. But in Angular 4.0, pipes work as an operator. The basic idea is, we have an input and we can modify the input applying more than one pipe in it. This not only simplifies the nested pipe logic but also gave us a beautiful and clean syntax for our templates. Secondly, in case of async operations (which is newly introduced in angular 4.0, we will later in this chapter), we need to set things manually in case of angular 1.X filters. But pipes are smart enough to handle async operations.

Basic Pipes

Most of the pipes provided by Angular 4.0 will be familiar with us if we already worked in Angular 1.x. Actually, pipes do not provide any new feature in Angular 4.0. In Angular 4.0, we can use logic in the template. Also, we can execute or fire any function within the template to obtain its return value. The pipe syntax starts with the actual input value followed by the pipe (|) symbol and then the pipe name. the parameters of that pipe can be sent separately by the colon (;) symbol. The order of execution of a pipe is right to left. Normally, pipes work within our template and not in JavaScript code.

New Pipes

The decimal and percent pipes are new in Angular 4.0. These take an argument that indicates the digit information which should be used that is how many integer and fraction digits the number should be formatted with. The argument we pass for formatting follows this pattern:

{minIntegerDigits}.{minFractionDigits} -{maxFractionDigits}.

Sample code of app.component.inbuildpipe.ts

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'inbuild-pipe',
    templateUrl: 'app.component.inbuildpipe.html'
})

export class InBuildPipeComponent implements OnInit {
    private todayDate: Date;
    private amount: number;
    private message: string;

    constructor() { }

    ngOnInit(): void {
        this.todayDate = new Date();
        this.amount = 100;
        this.message = "Angular 4.0 is a Component Based Framework";
    }

}

Sample code of app.component.inbuildpipe.html

<div>
    <h1>Demonstrate of Pipe in Angular 4.0</h1>

    <h2>Date Format</h2>
    Full Date : {{todayDate}}<br />
    Short Date : {{todayDate | date:'shortDate'}}<br />
    Medium Date : {{todayDate | date:'mediumDate'}}<br />
    Full Date : {{todayDate | date:'fullDate'}}<br />
    Time : {{todayDate | date:'HH:MM'}}<br />
    Time : {{todayDate | date:'hh:mm:ss a'}}<br />
    Time : {{todayDate | date:'hh:mm:ss p'}}<br />

    <h2>Number Format</h2>
    No Formatting : {{amount}}<br />
    2 Decimal Place : {{amount |number:'2.2-2'}}

    <h2>Currency Format</h2>
    No Formatting : {{amount}}<br />
    USD Doller($) : {{amount |currency:'USD':true}}<br />
    USD Doller : {{amount |currency:'USD':false}}<br />
    INR() : {{amount |currency:'INR':true}}<br />
    INR : {{amount |currency:'INR':false}}<br />

    <h2>String Message</h2>
    Actual Message : {{message}}<br />
    Lower Case : {{message | lowercase}}<br />
    Upper Case : {{message | uppercase}}<br />

    <h2> Percentage Pipes</h2>
    2 Place Formatting : {{amount | percent :'.2'}}<br /><br />
</div>

Output

 

The Async Pipe

Angular 4.0 also introduced a special type of pipe called Async Pipe, which basically allows us to bind our templates directly to values that arrive asynchronously. This feature is a great way for working with promises and observables (we will discuss this in the later chapter). This type of pipes accepts a promise or observable as an input value, updating the view with the appropriate value(s) when the promise is resolved or observable emits a new value. This can have a dual impact on reducing component-level code while also providing incredible performance optimization opportunities when utilized correctly. To see how this works, we'll create a simple promise and have it resolve with a string. After a 5 second delay, the value from the resolved promise will be displayed on the screen.

Sample code of app.component.asyncpipes.ts

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'async-pipe',
    templateUrl: 'app.component.asyncpipe.html'
})


export class AsyncComponent implements OnInit {
    private message: string;

    promise: Promise<any>;


    constructor() {
        this.promise = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("Hey, I'm from a promise.");
            }, 5000)
        });
    }

    ngOnInit(): void {

    }

}

Sample code of app.component.asyncpipes.html

<h1>Async Pipes</h1>
<h2>{{ promise | async}}</h2>

Output

 

 

 

Custom

Now, we can define custom pipes in Angular 4.0. For configuring custom pipes, we need to used pipes object. For this, we need to define custom pipe with @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.

Sample code of app.pipes.propercase.ts

import { Pipe, PipeTransform } from "@angular/core"

@Pipe({
    name: 'propercase'
})

export class ProperCasePipe implements PipeTransform {
    transform(value: string, reverse: boolean): string {
        if (typeof (value) == 'string') {
            let intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();
            return (reverse == false ? intermediate[0].toLowerCase() :
                intermediate[0].toUpperCase()) + intermediate.substr(1);
        }
        else {
            return value;
        }
    }
}

Sample code of app.component.custompipe.ts

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'custom-pipe',
    templateUrl: 'app.component.custompipe.html'
})

export class CustomPipeComponent implements OnInit {
    private message: string;

    constructor() { }

    ngOnInit(): void {
        this.message = "This is a Custom Pipe";
    }

}

Sample code of app.component.custompipe.html

<div>
    <div class="form-horizontal">
        <h2 class="aligncenter">Custom Pipes - Proper Case</h2><br />
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2">
                <span>Enter Text</span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4">
                <input type="text" id="txtFName" placeholder="Enter Text" [(ngModel)]="message" />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2">
                <span>Result in Proper Case</span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4">
                <span>{{message | propercase}}</span>
            </div>
        </div>
    </div>
</div>

Output

 

 

What is ViewChild?

Basically, a ViewChild is one of the new features which was introduced in Angular 4.0 framework. Since Angular 4.0 basically depends on the component architecture, when we try to develop any web page or UI, it is most obvious that that page or UI must be a component which basically contains a number of multiple different types of components within that component. So in simple words, it is basically a parent component – child component based architecture. In this scenario, there are some situations when a parent component needs to interact with the child component. There are multiple ways to achieve this interaction between parent and child component. One the ways is ViewChild decorator. So if we want to get access to a child component, directive or DOM element from a parent component class, then we can use this ViewChild decorator. So when a parent component need to execute or call any method of the child component, it can inject child component as a viewchild within the parent component. ViewChild returns the first element that matches a given component, directive or template reference selector. In cases where you’d want to access multiple children, you’d use ViewChildren instead.

For implementing ViewChild, we need to use @ViewChild decorator in the parent component. The @ViewChild decorator provides access to the class of child component from the parent component. The @ViewChild is a decorator function that takes the name of a component class as its input and finds its selector in the template of the containing component to bind to. @ViewChild can also be passed to a template reference variable.

Now to illustrate this, we will develop a calculator type UI. In this, we will develop two components.

1. First component i.e. child component which contains the two textbox from taking inputs and four buttons for performing four basic mathematical operations. After completion of the operation, each button will emit its final value to parent component so that parent component can show those values or perform any other operations on the basis of those values.
2. Now parent component wants to clear the values from both itsown component and also from child component. For clearing the child component value, parent component will access the child component’s clear() by using the @ViewChild decorator.

Sample code of app.component.child.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'child',
    templateUrl: 'app.component.child.html'
})

export class ChildComponent implements OnInit {
    private firstNumber: number = 0;
    private secondNumber: number = 0;
    private result: number = 0;

    @Output() private addNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private subtractNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private multiplyNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private divideNumber: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }

    ngOnInit(): void {
    }

    private add(): void {
        this.result = this.firstNumber + this.secondNumber;
        this.addNumber.emit(this.result);
    }

    private subtract(): void {
        this.result = this.firstNumber - this.secondNumber;
        this.subtractNumber.emit(this.result);
    }

    private multiply(): void {
        this.result = this.firstNumber * this.secondNumber;
        this.multiplyNumber.emit(this.result);
    }

    private divide(): void {
        this.result = this.firstNumber / this.secondNumber;
        this.divideNumber.emit(this.result);
    }

    public clear(): void {
        this.firstNumber = 0;
        this.secondNumber = 0;
        this.result = 0;
    }
}

Sample code of app.component.child.html

<div class="ibox-content">
    <div class="row">
        <div class="col-md-4">
            Enter First Number
        </div>
        <div class="col-md-8">
            <input type="number" [(ngModel)]="firstNumber" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            Enter Second Number
        </div>
        <div class="col-md-8">
            <input type="number"  [(ngModel)]="secondNumber" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-8">
           <input type="button" value="+" (click)="add()" />

            <input type="button" value="-" (click)="subtract()" />

            <input type="button" value="X" (click)="multiply()" />

            <input type="button" value="/" (click)="divide()" />
        </div>
    </div>
</div>

Sample code of app.component.parent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './app.component.child';

@Component({
    moduleId: module.id,
    selector: 'parent',
    templateUrl: 'app.component.parent.html'
})

export class ParentComponent implements OnInit {
    private result: string = '';

    @ViewChild('calculator') private _calculator: ChildComponent;

    constructor() {
    }

    ngOnInit(): void {
    }

    private add(value: number): void {
        this.result = 'Result of Addition ' + value;
    }

    private subtract(value: number): void {
        this.result = 'Result of Substraction ' + value;
    }

    private multiply(value: number): void {
        this.result = 'Result of Multiply ' + value;
    }

    private divide(value: number): void {
        this.result = 'Result of Division ' + value;
    }

    private reset(): void {
        this.result = '';
        this._calculator.clear();
    }
}

Sample code of app.component.parent.html

<div>
    <h2>Simple Calculator</h2>
    <div>
        <child (addNumber)="add($event)" (subtractNumber)="subtract($event)" (multiplyNumber)="multiply($event)"
                (divideNumber)="divide($event)" #calculator></child>
    </div>
    <h3>Result</h3>
    <span>{{result}}</span>
    <br />
    <br />
    <input type="button" value="Reset" (click)="reset()" />
</div>

Output

 

 

  

<< Read Part 4 of this article here

                                                                                                                                                             Read Part 6 of this article here >>