AngularJS 2.0 From The Beginning

#AngularJS2.0 From The Beginning - Pipes - Day 8 by @debasiskolsaha cc @CsharpCorner

  • Now, in this article, I will discuss about pipes, one of the new flavors of Angular 2 architectures.
  • In Angular 2.0, the pipes are the modernized version of the filters.
  • x have been converted as pipes in Angular 2.0 with some new pipes.
  • The table given below shows a comparison of pipes or filters in both Angular 1.
  • Thus, in this article, we will discuss how to use Angular 2.0 predefined pipes and also discuss how to create a custom pipe in Angular 2.0.

In this article, we will discuss about pipes in Angular 2.0.

@CsharpCorner: #AngularJS2.0 From The Beginning – Pipes – Day 8 by @debasiskolsaha cc @CsharpCorner

I am here to continue the discussion around AngularJS 2.0. Today, we will discuss about pipes in AngularJS 2. Also, if, you did not have a look at the previous articles of this series, go through the links, mentioned below.

In my previous article, I already discussed about the structural Directives in Angular 2.0. In that article, we discussed about some inbuilt structural Directives. Now, in this article, I will discuss about pipes, one of the new flavors of Angular 2 architectures.

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 or doing any existing changes or mutating. Filters are basically just functions, which take a single value or a collection of values as an input and return a new value or collection of the value, which is based on the logical responsibilities. In Angular 2.0, the pipes are the modernized version of the filters. Most of the inbuilt filters of Angular 1.x have been converted as pipes in Angular 2.0 with some new pipes. Pipes are accessed in our templates in the same way that filters were–with the “pipe” character |. The table given below shows a comparison of pipes or filters in both Angular 1.x and Angular 2.0.

Thus, in this article, we will discuss how to use Angular 2.0 predefined pipes and also discuss how to create a custom pipe in Angular 2.0.

Most of the pipes provided by Angular 2.0 will be familiar to us, if we already worked in Angular 1.x. Actually pipes do not provide any new features in Angular 2.0. In Angular 2.0, we can use logic in the template. Also, we can execute or fire any function within the template to obtain its return value but actually pipe is a handsome way to handle this entire thing within the template. Also, it makes our code clean and structural. 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 works within our template and not in JavaScript code.

The decimal and percent pipes are new in Angular 2.0. These take an argument that indicates the digit information, which should be used – that is how many integers and fraction digits; the number should be formatted with. The argument, which we pass for formatting follows this pattern: {minIntegerDigits}.{minFractionDigits} -{maxFractionDigits}.

@Component({  

    moduleId: module.id,  

    selector: ‘inbuild-pipe’,  

    templateUrl: ‘app.component.inbuildpipe.html’  

Now, we define a custom pipe in Angular 2.0. To configure custom pipes, we need to use pipe 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, which is necessary to convert the value 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.

@Pipe({  

    name: ‘propercase’  

AngularJS 2.0 From The Beginning