Angular titlecase Pipe
April 06, 2024
On this page we will learn to use titlecase
pipe in our Angular application.
TitleCasePipe
TitleCasePipe
transforms text to title case. It converts first letter of each word to upper case and other letters of each word to lower case. TitleCasePipe
works for words delimited by any whitespace character, such as a space, tab, or line-feed character.
Find its syntax.
{{ value_expression | titlecase }}
titlecase
pipe, we need to import CommonModule
in our angular application. If our application uses application module then import CommonModule
within @NgModule
decorator. If we are using standalone application, then import module within @Component
decorator.
Find the code snippet to import
CommonModule
in standalone application.
@Component({ standalone: true, imports: [CommonModule], ------ })
Using 'titlecase' Pipe
1. Words separated with space.<h3> {{'my name is harry' | titlecase}} </h3>
<h3>My Name Is Harry</h3>
We can use component property with
titlecase
.
TS code:
title = "my name is harry";
<h3> {{title | titlecase}} </h3>
titlecase
will fix them.
{{"mY nAMe iS hArRY" | titlecase}}
2. Words separated with dash (-)
If words are are separated with dash without space, it will be considered one word.
{{"print-screen vice-versa" | titlecase}}
Print-screen Vice-versa
{{"john - bob india - delhi" | titlecase}}
John - Bob India - Delhi
3. With comma (,) separated.
titlecase
capitalises first letter of each word with comma separated.
{{"austin, chicago, new york" | titlecase}}
Austin, Chicago, New York
titlecase
will consider them one word.
4. With apostrophe s ('s)
{{"It's day time" | titlecase}}
It's Day Time
5. With pipe ( | ) delimiter.
Words separated with pipe (|) are considered separate words and
titlecase
pipe capitalises first letter of each word.
{{"yes | no" | titlecase}}
Yes | No
titlecase
will capitalises only first word.
6. With slash ( / )
{{"england / london" | titlecase}}
England / London
7. With parenthesis ()
{{"he (bob) is playing." | titlecase}}
He (Bob) Is Playing.
8. With ampersand (&)
{{"henry & jack" | titlecase}}
Henry & Jack
8. With bracket []
{{"[mango, banana, guava]" | titlecase}}
[Mango, Banana, Guava]
9. With (+)
{{"angular + rxJs" | titlecase}}
Angular + Rxjs
Using TitleCasePipe in Component
To useTitleCasePipe
in component TS file, create its object and call its transform()
method.
const titleCase = new TitleCasePipe(); const title = titleCase.transform("Hello World"); console.log(title); // Hello World
Complete Example
titlecase.component.tsimport { Component, OnInit } from '@angular/core'; import { CommonModule, TitleCasePipe } from '@angular/common'; @Component({ selector: 'app-titlecase', standalone: true, imports: [CommonModule], templateUrl: './titlecase.component.html' }) export class TitleCaseComponent implements OnInit { title = "welcome to all of you"; ngOnInit(): void { this.convertInTitleCase(); } convertInTitleCase() { const titleCase = new TitleCasePipe(); const titleStr = "getting started with angular"; const title1 = titleCase.transform(titleStr); console.log(title1); const title2 = titleCase.transform("mY skILLs are java, spring"); console.log(title2); const title3 = titleCase.transform("day & night"); console.log(title3); const title4 = titleCase.transform("active | inactive"); console.log(title4); const title5 = titleCase.transform("france - paris"); console.log(title5); } }
<h3> {{title | titlecase}} </h3> <h3> {{"lEaRn hibErNatE wiTh eXamPles" | titlecase}} </h3> <h3> {{"vice - versa" | titlecase}} </h3> <h3> {{"varanasi, mumbai, new delhi" | titlecase}} </h3> <h3> {{"united states / washington" | titlecase}} </h3> <h3> {{"he is going there (london)" | titlecase}} </h3> <h3> {{"up & down" | titlecase}} </h3> <h3> {{"spring + hibernate" | titlecase}} </h3>