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
Last Updated :
30 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...