Angular

Pipes in Angular Part – 1 : lowercase, uppercase, and titlecase pipes

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:lowecase 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

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:

Leave a Reply