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 Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- CSS Tricks for Uppercase and LowerCase and TitleCase
- Get Started With Ionic4
- How to use ngrx/store with Ionic 4