Angular TitleCase Pipe:Capitalize First Letter Of Each Word In Angular

To capitalize first letter of each word in Angular use Angular’s TitleCasePipe.We have to pass input to the titlecase pipe as shown below

<p>{{'titleCasePipe capitalizes first letter of each word in angular'
| titlecase}}</p>
<!-- Output -->
<!--TitleCasePipe Capitalizes First Letter Of Each Word In Angular-->

Angular TitleCasePipe is one of the built in pipes which converts text to titlecase.

Angular TitleCasePipe Syntax

The syntax is very simple Just we need to pass input of type string to titlecase pipe

{{ value_expression | titlecase }}

And words in a text determined based upon the white space delimiters such as space,tab or line-feed character.

Angular TitleCasePipe Examples

We go through the different  Angular TitleCasePipe examples to understand it further.

We will create a component called titlecase component in our Angular project. And test the different kind of inputs

<p>{{'angular titlecase' | titlecase}}</p>
<!-- output is "Angular Titlecase" --> 
<p>{{'anGuLaR tITLEcASE' | titlecase}}</p> 
<!-- output is "Angular Titlecase" --> 
<p>{{'angular title-case' | titlecase}}</p>
<!-- output is "Angular Title-case" --> 
<p>{{'angular,titlecase' | titlecase}}</p>
<!-- output is "Angular,titlecase" -->
<p>{{'angular|titlecase' | titlecase}}</p>
<!-- output is "Angular|titlecase" -->
<p>{{'angular-titlecase' | titlecase}}</p>
<!-- output is "Angular-titlecase" -->

Even though if you pass mixed case text to Angular titlecase pipe, It will convert the first letter of each word to uppercase and remaining letters to lowercase.

And the delimiter should be whitespace only. Commas,Pipes,hyphens etc are not considered as delimiters.

That is why in above example ‘angular-titlecase’ is displayed as “Angular-titlecase” instead of “Angular-Titlecase”