Angular Titlecase Pipe example | Convert string to titlecase in typescript

This tutorial covers the implement titlecase pipe example in Angular.

Angular titlecase

what is a titlecase for a string?. titlecase for a statements is to capitalize the first letter of all major words and remaining letters of the words are lowercase.
Title case for a strings can be applied in the following ways

• heading
• blog title
• essay heading
• news headings

Simple example for a string is

angular framework
 and output is 
 Angular Framework

titlecase pipe Syntax

Angular pipe is an custom code which accepts input, transform it and output data.

Angular provides inbuilt pipe titlecase. This transform each word with first letter capitalize and remaining letter lower case

{{string_expression | titlecase}}

string_expression is either string or expression value titlecase is an inbuilt angular titleCasePipe

titlecase pipe component example

In the component, titlecase pipe used in expression.

<div>
    <h2>{{ heading | titlecase }}</h2>
</div>

In typescript controller, heading variable is declared, initialized with mixed case

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading="angular titlecase example tutorials";
  heading1="angular-titlecase example tutorials";

}

And the output seen in the browser is

Important points

• Transformed first letter of each word into uppercase, remaining letters into lowercase in the statements
• statements with delimited by whitespaces,tabs are considered as words
• comma,hyphen and other special characters are not treated as delimiter.

titlecase pipe can also implemented in typescript controller with custom code

In this post, we have learned

• Angular pipe titlecase syntax
• titlecase example