This post continues our exploration of Angular's built-in pipes.
Pipes we will cover:
LowerCasePipe
PercentPipe
SlicePipe
TitleCasePipe
UpperCasePipe
LowerCasePipe
This pipe transforms alphabetical strings into lower case, or small letters.
Syntax
{{ value | lowercase }}
It is exported from the CommonModule.
It accepts only a string as its input.
Let’s look at a practical example. Here is our playground 👇
Paste the following code into the component.ts file:
myName = 'JOHN DOE';
Now, paste this into the component's HTML file:
<hr>
<h2>Lowercase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p>{{myName }}</p>
<h3>With Pipe</h3>
<p>{{myName | lowercase}}</p>
The browser will render the following output 👇
Notice that without the pipe, the original value is displayed. After applying the lowercasePipe, the value is converted to lowercase.
PercentPipe
This pipe formats a number as a percentage string. The formatting follows locale rules that define the group size and separator.
Syntax
{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}
It is exported from the CommonModule.
It accepts a string or a number as its input.
Parameters
digitsInfo -
This works exactly like the digitsInfo parameter in the decimal pipe. You can review the details here.
Let’s see it in action in the same playground.
Add the following code to the component.ts file:
percentValue = 0.234769;
And in the template file, add this code:
<h2>Percent Pipe Demo</h2>
<p>{{ percentValue | percent }} </p>
Check the output:
As you can see, the result is 23%.
Points to note
The value is rounded and a percent sign is added.
If you change the percentValue variable to 0.237769, the output becomes 24%.
Without specifying digitsInfo, the output has no decimal places, and the value is rounded off.
Now, let's see how digitsInfo controls the format. Add the following to the template file:
<hr>
<h3>digitsInfo Example</h3>
<p>{{ percentValue | percent: '2.2-3'}} </p>
The output will then be:
Interpreting the above output
The digit before the decimal point (2) indicates the number of digits that will appear before the decimal in the output.
Important
If the actual result has two digits before the decimal (like here) but you specify fewer in digitsInfo (e.g., <p>{{ percentValue | percent: '1.2-3'}} </p>), the output still shows two digits.
To enforce three digits before the decimal, use 3.2-3 in digitsInfo; a leading zero will be added if needed.
In 1.2-3, the 2 and 3 represent the minimum and maximum digits after the decimal point. This means at least two and at most three digits will appear after the decimal. Since the original value has more than three digits, three digits are shown after rounding.
SlicePipe
This pipe creates a subset of an input string or array.
Syntax
{{ value_expression | slice : start [ : end ] }}
It is exported from the CommonModule.
It accepts a string or an array as input.
Parameters
start
This is a number and is mandatory.
end
This is a number representing the end position of the string or array (the item at this index is not included).
It is optional and defaults to undefined.
Let's dive into an example.
Add the following to the component.ts file:
sliceDemoString = 'John Snow';
sliceDemoArray = ['a', 'b', 'c', 'd', 'e'];
Then, in the template file, add this code:
<h2>Slice Pipe Demo</h2>
<hr>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString }} </p>
<p>{{ sliceDemoArray }} </p>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString | slice: 2 }} </p>
<p>{{ sliceDemoArray | slice: 1}} </p>
The output will be:
Explanation
In the first example, we used the slice pipe with a start index of 2. The characters Jo at indexes 0 and 1 are removed from the string John Snow, leaving the rest. Since J is at index 0, the slice begins from index 2.
In the second example, the start index is 1, so the first element (index 0) is removed, and the slice starts from index 1.
Now, update the template file with the following code:
<p>{{ sliceDemoString | slice: 2:4 }} </p>
<p>{{ sliceDemoArray | slice: 1:3}} </p>
And the corresponding output:
In the first example, the subset starts at index 2 and ends right before the given end index, which is 4. Thus, it includes items at indexes 2 and 3.
In the second example, with a start index of 1 and an end index of 3, the subset includes indexes 1 and 2, producing 'b' and 'c'.
TitleCasePipe
This pipe converts text to title case. Each word’s first letter in the input string will be capitalized.
Syntax
{{ value_expression | titlecase }}
It is exported from the CommonModule.
It takes a string as input.
Let's see this in action. Add the following to the component.ts file:
titleCasePipeDemoString = 'You will be master in Angular
very soon!';
In the template file:
<h2>TitleCase pipe</h2>
<h3>Without using pipe</h3>
<p>{{ titleCasePipeDemoString }}</p>
<h3>With using the Titlecase pipe</h3>
<p>{{ titleCasePipeDemoString | titlecase}}</p>
The output will be:
Here, each word's initial letter is now capitalized.
And now, the final pipe...........
UpperCasePipe
This is the opposite of LowerCasePipe. It converts the string to uppercase.
Syntax
{{ value_expression | uppercase }}
It is exported from the CommonModule.
It takes a string as input.
Let's check it out. Add the following to the component.ts file:
uppsercasePipeDemo = 'john snow';
In the template file:
<h2>UpperCase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p> {{ uppsercasePipeDemo }}</p>
<h3>With Pipe</h3>
<p> {{ uppsercasePipeDemo | uppercase }}</p>
The result:
It transforms the input string to uppercase.
That’s it, my friend. Great job working through all these pipes (a couple I intentionally skipped will be covered soon).
Coming up next: Creating a custom pipe.
I hope you found this post helpful.
If you did, please like, comment, and share. More Angular topics are on the way. Stay tuned.
Cheers!!!
Happy Coding