Pipes Operator In Angular 2 - Part Thirteen

Article

In this article, we are going to learn about Pipe Operator. In Angular, pipes are used to transform expressions into the desired format.

For example, we can have string converted to upper case or lower case, we can have decimals or number in the particular format. We can even have custom pipes to have the desired format.

In this article, let us look at some built-in transformations of these data types.

The first one is, we are going to have a property called name and assign a string as shown below.

Code

export class RathrolaComponent {
name = 'Rathrola';
}

Now in template, create a header tag and add interpolation to display the name property.

Code

@Component({
selector: "my-tuts",
template: `<h2>{{name}}</h2>`,
})

Save and refresh the browser. The output is shown below.

Now, let us see what are the transformations we can apply on our name property. Add another header tag in the template with pipe operator, as shown below.

Code

@Component({
selector: "my-tuts",
template: `<h2>{{name}}</h2>
. <h2>{{name | uppercase}}</h2>`,
})

Output

We used pipe operator here and this pipe operator on the left-hand side is going to have the expression to which we need to apply the transformation to and on the right-hand side, we are going to specify the transformation or designed format.

Similarly, for lower case, the output will be like following.

Now, let us add another pipe operator called slice. It is going to extract substring out of the original string. This takes arguments to specify an argument you use - the colon and single codes, and you specify the starting index. If we use, say, two as index and save, then after a hard refresh of the browser, the output will be -

Code

@Component({
selector: "my-tuts",
template: `<h2>{{name}}</h2>
a. <h2>{{name | uppercase}}</h2>
b. <h2>{{name | lowercase}}</h2>
c. <h2>{{name | slice:'2'}}</h2>`,
})

The last one is Replace pipe.

Code

@Component({
selector: "my-tuts",
template: `<h2>{{name}}</h2>
a. <h2>{{name | uppercase}}</h2>
b. <h2>{{name | lowercase}}</h2>
c. <h2>{{name | slice:'2':'4'}}</h2>
d. <h2>{{name | replace:'My':'Prem'}}</h2>`,
})

Output

Now, let's move on to numbers. Let me create a simple number as shown below.

Code

@Component({
selector: "my-tuts",
template: `<h2>{{8.567}}</h2>`,
})

Let’s copy h2 and paste it again below,

Actually, format is the same for both shown above, but we are going have different outputs from the same format. Same way, we are going to use number, give format, and specify one particular format, as shown below.

Code

@Component({
selector: "my-tuts",
template: `<h2>{{8.567}}</h2>
<h2>{{8.567 | number:'1.2.3'}}</h2>
`,
})

This is the minimum number of integer digits we need to have, let’s say 1

<h2>{{8.567 | number:'1'}}</h2>

What is the minimum number of decimals digits that we can have, let’s say 2,

<h2>{{8.567 | number:'1.2'}}</h2>

What is the maximum number of decimal digits that we can have, let’s say 3 ,

<h2>{{8.567 | number:'1.2.3'}}</h2>

So what we mean to say here is, towards the left of this decimal point, I need at least one point and towards the right, I need at least 2 numbers and a maximum number of three.

Output