Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/common

TitleCasePipe

Transforms text to title case. Capitalizes the first letter of each word, and transforms the rest of the word to lower case. Words are delimited by any whitespace character, such as a space, tab, or line-feed character.

{{ value_expression | titlecase }}
      
      {{ value_expression | titlecase }}

NgModule

Input value

value string

The string to transform to title case.

See also

Usage notes

The following example shows the result of transforming various strings into title case.

@Component({ selector: 'titlecase-pipe', template: `<div> <p>{{'some string' | titlecase}}</p> <!-- output is expected to be "Some String" --> <p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- output is expected to be "This Is Mixed Case" --> <p>{{'it\\'s non-trivial question' | titlecase}}</p> <!-- output is expected to be "It's Non-trivial Question" --> <p>{{'one,two,three' | titlecase}}</p> <!-- output is expected to be "One,two,three" --> <p>{{'true|false' | titlecase}}</p> <!-- output is expected to be "True|false" --> <p>{{'foo-vs-bar' | titlecase}}</p> <!-- output is expected to be "Foo-vs-bar" --> </div>` }) export class TitleCasePipeComponent { } 
      
      
  1. @Component({
  2.   selector: 'titlecase-pipe',
  3.   template: `<div>
  4.     <p>{{'some string' | titlecase}}</p> <!-- output is expected to be "Some String" --> 
  5.     <p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- output is expected to be "This Is Mixed Case" --> 
  6.     <p>{{'it\\'s non-trivial question' | titlecase}}</p> <!-- output is expected to be "It's Non-trivial Question" --> 
  7.     <p>{{'one,two,three' | titlecase}}</p> <!-- output is expected to be "One,two,three" -->
  8.     <p>{{'true|false' | titlecase}}</p> <!-- output is expected to be "True|false" -->
  9.     <p>{{'foo-vs-bar' | titlecase}}</p> <!-- output is expected to be "Foo-vs-bar" -->
  10.   </div>`
  11. })
  12. export class TitleCasePipeComponent {
  13. }