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
<div style="text-align:center">
<h1>
{{'Welcome to the demo of LOWERCASE pipe' | lowercase}}
</h1>
</div>
Output:
Uppercase pipe
The uppercase pipe is used to transform text to all upper-case format.
Syntax: {{ value | uppercase}}
Please consider below example
</div><div style="text-align:center">
<h1>
{{'Welcome To The Demo of UPPERCASE pipe' | uppercase}}
</h1>
</div>
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
<div style="text-align:center">
<h1>
{{'Welcome To The Demo of TITLECASE pipe' | titlecase}}
</h1>
</div>
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
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
statement = 'Welcome To The Demo of TITLECASE pipe';
}
Applying pipes
<div style="text-align:center">
<h1>
{{statement | titlecase}}
</h1>
</div>
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
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
value: string;
toLoweUpper(value: string) { this.value = value; }
}
app.component.html
<div style="text-align:left">
<label>Name: </label><input #name (keyup)="toLoweUpper(name.message)" type="text">
<p>In lowercase: '{{value | lowercase}}'
<p>In uppercase: '{{value | uppercase}}'
<p>In titlecase: '{{value | titlecase}}'
</div>
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:
I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs