Angular UpperCase Pipe and LoweCase Pipe Example

In this Angular Pipe Example article, we’ll learn about UpperCase and LowerCase pipe in Angular.

We’ll see an example of using Uppercase and LowerCase Pipe.

In Angular, Pipe is something that takes in data as input and transforms it into the desired output.

Table of Contents

Format

{{ value_expression | uppercase }}
or
{{ value_expression | lowercase }}

Here, value_expression is the string to transform to uppercase/lowercase.

UpperCase Pipe

UpperCase pipe converts string into uppercase.

UpperCase is an API provided by angular. It is part of angular CommonModule.
It can be used like the following example.

uppercase-example.component.ts will look as follows:


import { Component } from "@angular/core";
@Component({
  selector: "app-uppercase-example",
  templateUrl: "./uppercase-example.component.html",
  styleUrls: ["./uppercase-example.component.css"]
})
export class AppUppercaseExampleComponent {
  title = "Uppercase Demo";
}

uppercase-example.componenr.html will look as follows:


<div>{{title | uppercase}}</div>

Output:

UPPERCASE DEMO

LowerCase Pipe

LowerCase pipe converts a string into lowercase.

LowerCase is an API provided by angular. It is part of angular CommonModule. It can be used like the following example.

lowercase-example.component.ts will look as follows:


import { Component } from "@angular/core";
@Component({
  selector: "app-lowercase-example",
  templateUrl: "./lowercase-example.component.html",
  styleUrls: ["./lowercase-example.component.css"]
})
export class AppLowerCaseExampleComponent {
  title = "LowerCase Demo";
}

lowercase-example.componenr.html will look as follows:


<div>{{title | lowercase}}</div>

Output:

lowercase demo

I hope you like this article. 🙂

Also, read:

Angular CRUD operation Example