Skip to main content

Angular : Pipes


A  guide to Angular's Pipes

So what exactly are pipes?

There's not much of a difference when we use the real world example of pipes to understand the angular's pipes. Well here's a sentence denoting real world pipe : He heard a tune being piped. Pretty straight forward huh? A person blows air (data) into a  flute and controls (transforms) the music that comes out.
Well Angular's Pipes are no different, you give some input data  and then transform the outcome of the same data but in a different format. 


A deep dive into Angular Pipes 

From the official Docs Pipes are : Pipes transform displayed values within a template.
Pipes are a feature of Angular 2 that allows you to contextually manipulate and format text on the front end. From simple date formatting, to a complete transformation, pipes allow you to separate how you display data provided from the backend.

 Usage can be as belows : 

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

Following are the in-built pipes provided by Angular.


Pipe Name           Angular  
currency
date
uppercase
json
limitTo
lowercase
number
orderBy
filter
async
decimal
percent


General syntax 
{{today | date }}

Pipe with Params 

The pipe date is also a predefined date. The date format string we provided after colon is a parameter for the pipe date. Syntax {{today | date:"dd/MM/yyyy"}}

Code : 
Date Pipe
Ouput : 
1. Today is Wed May 24 2017 11:00:33 GMT+0530 (IST)

2. Today is May 24, 2017

3. Today is 24/05/2017

Decimal Pipe

Output : 
pi (no formatting): 3.1415927
pi (.5-5): 3.14159
pi (2.10-10): 03.1415927000
pi (.3-3): 3.142

Currency Pipe
Output : 
A in USD: $0.12


B in INR: INR0,001.10


Upper Case Lower Case Pipe
Output : 
In lowerCase : my name is paul shan


In uppercase : MY NAME IS PAUL SHAN

JSON Pipe
Output : 
Without JSON Pipe.

[object Object]
With JSON Pipe.


{ "name": { "fName": "Paul", "lName": "Shan" }, "site": "VoidCanvas", "luckyNumbers": [ 7, 13, 69 ] }

Percent Pipe
Output : 
myNum : 14.159%


myNum (3.2-2) : 014.16%

Slice Pipe
Output : 
voidcanvas.com (0:4): My n

names (1:4)

david
ean

renee


Async Pipe
Ouput : 
wait...
Click me to initiate promise



wait... resolved


Click me to initiate promise

Custom Pipes

Though there are few predefined pipes available, but custom pipes are very much necessary; even that’s why the pipes exist.

You might have noticed Pipes is not a feature.You can execute a function in the template to get its returned value. But pipes is a handsome way to handle these things in templates. It makes your code more clean and structured.
Code :

Creating a custom pipe
Consuming the created custom pipe

Pipe classes has three hooks.

  •  constructor(arguments) 
  •  transform(value, arguments)
  •  onDestroy()
 constructor() is the normal constructor of the class, example of transform() is already given above. onDestroy() is called once the pipe is going to be destroyed. You can find an example of this later on in this article.

Pure Vs Impure Pipes

Pure pipes execute only on value change whereas impure pipes execute repeatedly on a user based scenario instead of value change. By default all Pipes provided by Angular as Pure Pipe. To make a custom pipe impure we simply set its metadata attribute to true Syntax @Pipe({name: 'custom', pure: false}).

Comments

Popular posts from this blog

Redis Basic CRUD

We have seen how to setup on your linux machine here , now we will see how to perform basic CRUD operations using Spring Data & Redis server We will be creating a simple application that would persist an employee information into redis database. You will be needing certain JARs like jedis.jar, spring-data-redis.jar etc details of which you can download and view at https://github.com/meta-magic/RedisCRUDexample.git  First of all we will be creating the Employee entity, plz note that we are using the Serializable interface which automatically mapps the objects against the key. Employee.java import java.io.Serializable ; public class Employee implements Serializable { private static final long serialVersionUID = - 8243145429438016231L ; public enum Gender { Male , Female } private String id; private String name; private Gender gender; private int age; public String getId () { return id; } public void setId ( String

Eureka-Server with spring cloud netflix

In this write-up we will focus on Service Registry – Eureka Server Rest service (auth-service application, eureka client) which register itself to registry. Web application which consumes Rest service using service registry. Service discovery  allows services to find and communicate with each other without hardcoding hostname and port. Eureka Server In spring-boot application enable the Eureka-Server by adding @EnableEurekaServer annotation to spring boot application. We have put all the configuration on GIT and this is accessed using config-server. To now more about centralized configuration (config-server) click  here eurekaserver.yml Place below bootstrap.yml in application, it basically connects to config-server and gets it required configuration. Start the spring-boot application and access eureka server using http://localhost:8760/ you will get below screen. Right now there is no application which is registered to e

Redis Installation Steps

“ Redis is an in-memory key-value store known for its flexibility, performance, and wide language support” Inorder to install redis on your machine you need ubuntu 16.4 and a non-root user with sudo privileges to perform the administrative functions required for this process. Download and Extract the Source Code Create a tmp directory cd /tmp Download the latest stable version of Redis curl -O http://download.redis.io/redis-stable.tar.gz untar tar xzvf redis-stable.tar.gz Move into the Redis source directory structure that was just extracted cd redis-stable Build and Install Redis Now, we can compile the Redis binaries by typing make After the binaries are compiled, run the test suite to make sure everything was built correctly. You can do this by typing: make test This will typically take a few minutes to run. Once it is complete, you can install the binaries onto the system by typing: sudo