In this series of article for the angular rookies we will discuss about pipes in Angular, a way to write display-value transformations that you can declare in your HTML. In this article we will discuss about lowercase, uppercase, and titlecase pipes. At the end of the series we will create our own custom pipes.

Lowercase pipe

The lowercase pipe is used to transform text to all lower-case format.

Syntax: {{ value | lowercase}}

Please consider below example

Output:lowecase output

 

Uppercase pipe

The uppercase pipe is used to transform text to all upper-case format.

Syntax: {{ value | uppercase}}

Please consider below example

Output:

Titlecase pipe

The titlecase pipe is used to transform first character of the word to capital and rest word to lower case. Words are delimited by any white space character, such as a space, tab, or line-feed character.

Syntax: {{ value | titlecase}}

Please consider below example

Output:

The pipes can also be applied to the variable. Consider the below example in which you have variable called ‘statement’ on which we are going to apply pipes.

Component

Applying pipes

Example

Consider the example where we will write a message into the textbox and we will transform the text using above pipes

app.component.ts

app.component.html

Output

example output

Summary:

This article is for rookie angular developers. If you are not aware about how to get start with angular you can read other articles from the Angular section from this website.

Some useful articles for beginners:

Yatendrasinh Joddha
I am a software engineer currently living in Gandhinagar, India. My interest is in web and software development. I am also interested in sharing my knowledge with people.

I have expertise in asp.net and related Microsoft technologies, with JavaScript frameworks and libraries like JQuery, KnockOut.js,and AngularJS.
Yatendrasinh Joddha on FacebookYatendrasinh Joddha on GithubYatendrasinh Joddha on LinkedinYatendrasinh Joddha on TwitterYatendrasinh Joddha on Wordpress