Introduction To Pipes In Angular 2

Introduction To Pipes In #Angular2 by Vishal Gilbile cc @CsharpCorner  #Angular #Angularjs

  • We are done with creating our custom Angular 2 pipe.
  • We’ve decorated the EmployeeSearchPipe class with @Pipe decorator which tells Angular that this is our custom pipe.
  • In order to put this pipe to work, we need to modify our app.module.ts file (so that we can register our custom pipe with that of the application module & use it throughout the application).
  • The steps to create a pipe are almost similar to that of creating a component.
  • We’ve applied our custom pipe “empByName” on the *ngFor row.

In this article, you will learn about Pipes in Angular 2.

@CsharpCorner: Introduction To Pipes In #Angular2 by Vishal Gilbile cc @CsharpCorner #Angular #Angularjs

In our previous post, we saw the following.

In this post, we’ll try to explore more on Angular 2 pipes & how we can create and use a custom pipe as per our business requirement.

As we saw in our last post, Pipes help us transform displayed values within a template. It takes in the data with provided optional parameters if any; and transforms the data into the desired output. We also saw that Angular 2 has certain built-in pipes which can be used wherever required in any template. In Angular 1.x, we used to have “filters” for performing the same task. In Angular 2, it’s renamed to “Pipes”. Both the versions share some common filters/pipes. The below table lists the same.

Angular 2 shares some common pipes along with some new additional pipes.

In Angular 2, we can chain Pipes i.e. applying more than one pipe to a property or an object. The sequence of how the pipes will be executed/applied will depend on the order of pipes specified on to the property. For example, if a property has | date | uppercase pipe applied; then in that case, first date pipe will be executed/applied followed by the uppercase pipe. Syntax for applying multiple pipes is –

In Angular 2, we can create custom pipes too. It helps us to write our own custom specification as per our business requirement. To help us understand how to create a custom pipe, we’ll try to create a pipe which filters data (on employee name) from our employee’s[] model and displays the searched result on the UI. Since our employee search pipe is going to be used only inside the “emp” module, we’ll create this pipe inside our “emp” folder. The steps to create a pipe are almost similar to that of creating a component. Let’s have a look at it.

Our EmployeeSearchPipe implements PipeTransform interface and provides implementation for transform method. In transform, we are simply checking whether any parameter was passed or not in the args string[] along with the input value.

If there is any input, then we are filtering the value parameter which is of type IEmployee[] to return the filtered result, else to return the full result.

We’ve decorated the EmployeeSearchPipe class with @Pipe decorator which tells Angular that this is our custom pipe. Also, in the pipe decorator, we provided the name of our custom pipe, which, in our case, is “empByNameFilter”.

That’s it. We are done with creating our custom Angular 2 pipe. In order to put this pipe to work, we need to modify our app.module.ts file (so that we can register our custom pipe with that of the application module & use it throughout the application). We need to update emp-list.component.html file too (i.e. to provide users with an input text where the user can provide a value on which our custom pipe search would be applied).

      

          

          

      

          

          

      

          

                            {{emp.salary|currency: ‘INR’ : true : ‘1.2-2’ }}

  

Now, run the application and you’ll see the below output.

Try to provide a filter value in the input text box and check whether your data is been filtered like the below snapshot or not.

In our next post, we’ll continue further. Until then, you can download the solution and test it locally at your end. I am uploading the solution with this post; but I won’t be able to upload the node_modules folder because of heavy size. So, I request you to do npm install before you run the application, after downloading the solution.

Introduction To Pipes In Angular 2

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.