Angular10 TitleCasePipe
Last Updated :
30 Apr, 2021
In this article, we are going to see what is TitleCasePipe in Angular 10 and how to use it.
TitleCasePipe is used to Transforms all the text to titlecase.
Syntax:
{{ value | TitleCasePipe }}
NgModule: Module used by TitleCasePipe is:
Approach:
- Create the angular app to be used
- There is no need for any import for the TitleCasePipe to be used
- In app.component.ts define the variables that takes the TitleCasePipe value.
- In app.component.html use the above syntax with ‘|’ symbol to make TitleCasePipe element.
- Serve the angular app using ng serve to see the output
Input value:
- value: it takes a 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 >
titlecase value is : {{value | titlecase}}
</ 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 >
TitleCase value is : {{value |titlecase}}
</ div >
</ b >
|
Output:
Reference: https://angular.io/api/common/TitleCasePipe
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...