Angular titlecase Pipe

By Arvind Rai, 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 }} 
To use 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> 
Output in DOM.
<h3>My Name Is Harry</h3> 
We can see that first letter of each word has been capitalised.
We can use component property with titlecase.
TS code:
title = "my name is harry"; 
HTML
<h3> {{title | titlecase}} </h3> 
If words are randomly in small or capital, titlecase will fix them.
{{"mY nAMe iS hArRY" | titlecase}} 
Output will be 'My Name Is Harry' .

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}} 
Output
Print-screen Vice-versa 
If dash is prefixed and suffixed with space, then the letter of each word will be capitalised.
{{"john - bob  india - delhi" | titlecase}} 
Output
John - Bob India - Delhi 

3. With comma (,) separated.
titlecase capitalises first letter of each word with comma separated.
{{"austin, chicago, new york" | titlecase}} 
Output
Austin, Chicago, New York 
If comma is not suffixed with space, then titlecase will consider them one word.

4. With apostrophe s ('s)
{{"It's day time" | titlecase}} 
Output
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}} 
Output
Yes | No 
If pipe ( | ) is not prefixed and suffixed with space then titlecase will capitalises only first word.

6. With slash ( / )
{{"england / london" | titlecase}} 
Output
England / London 

7. With parenthesis ()
{{"he (bob) is playing." | titlecase}} 
Output
He (Bob) Is Playing. 

8. With ampersand (&)
{{"henry & jack" | titlecase}} 
Output
Henry & Jack 

8. With bracket []
{{"[mango, banana, guava]" | titlecase}} 
Output
[Mango, Banana, Guava] 

9. With (+)
{{"angular + rxJs" | titlecase}} 
Output
Angular + Rxjs 

Using TitleCasePipe in Component

To use TitleCasePipe 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);

  }
} 
titlecase.component.html
<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> 
Find the print-screen of the output.
Angular titlecase Pipe

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE







©2024 concretepage.com | Privacy Policy | Contact Us