In this article, we are going to see what is LowerCasePipe in Angular 10 and how to use it.
The LowerCasePipe is used to Transforms all the text to lowercase.
Syntax:
{{ value | lowercase }}
NgModule: Module used by LowercaseCasePipe is:
Approach:
- Create the angular app to be used
- There is no need for any import for the LowerCasePipe to be used
- In app.component.ts define the variables that takes the LowerCasePipe value.
- In app.component.html use the above syntax with ‘|’ symbol to make LowerCasePipe element.
- serve the angular app using ng serve to see the output
Input value:
- value: it takes an string value.
Example 1:
app.component.ts
import { Component, OnInit }
from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
value : string = 'GEEKSFORGEEKS' ;
}
|
app.component.html
< b >
< div >
LowerCase value is :
{{value |lowercase}}
</ div >
</ b >
|
Output:
Example 2:
app.component.ts
import { Component, OnInit }
from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html'
})
export class AppComponent {
value : string = 'GeeksforGeeks' ;
}
|
app.component.html
< b >
< div >
CamelCase value is :
{{value}}
</ div >
< div >
LowerCase value is :
{{value |lowercase}}
</ div >
</ b >
|
Output:
Reference:https://angular.io/api/common/LowerCasePipe
Last Updated :
28 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...