Back to Tips

TitleCasePipe

Angular provides the TitleCasePipe, which capitalizes the first letter of each word and also transforms the rest of the word to lowercase.

@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 {}

Support

If you enjoyed this tip and found it useful, consider buying me a coffee. Thanks in advance!

Buy Me a Coffee at ko-fi.com
Using Angular v.18.2.8 🚀