Angular titlecase Pipe
April 06, 2024
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.ts
import { 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>
