Angular UpperCase Pipe and LoweCase Pipe Example

Angular UpperCase Pipe and LoweCase Pipe Example


In Angular, We have a few built-in pipes. In this blog post, 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 to the desired output.



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 as 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 as 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


Also, read:


If you like this post, please share it with your friends.
Thanks.
Angular UpperCase Pipe and LoweCase Pipe Example Angular UpperCase Pipe and LoweCase Pipe Example Reviewed by Borad Akash on November 04, 2018 Rating: 5

No comments:

Powered by Blogger.