Angular 13 Titlecase pipe tutorial | How to Capitalize the first letter of each word of a string example

In this tutorial, you learn how to Capitalize the first letter of a word in A string with Angular typescript. It includes How to use TitleCasePipe in Angular HTML and typescript components.

For example, what is a title case for a string?. The first letter of all major words must be capitalized, and the remaining letters of the words should be lowercase. Title case for a string can be applied in the following ways

• heading
• blog title
• essay heading
• news headings Angular core provides pipes titleCase that transforms the first letter of each word in a string into uppercase This pipe works with input as a string and returns the output as a string

In Angular application, To make titleCase pipe works, You have to include CommonModule.

A simple example for a string is

angular framework
 and output pipe returns
 Angular Framework

Angular titlecasePipe example

The angular pipe is a custom code that accepts input, transforms it, and outputs data.

Angular provides an inbuilt pipe title case. Transforms each word with the first letter capitalized and the remaining letter lower case

syntax:

{{string_expression | titlecase}}

string_expression: is either string or expression value. title case: Angular common module pipe.

How to Capitalize the first letter of a word in Angular Component

In the component, title case pipe is used in the expression.

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

In typescript controller, variable heading 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";

}

And the output seen in the browser is

Important points:

• The 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, a hyphen, and other special characters are not treated as a delimiter.

title case pipe can also be implemented in typescript controller with custom code as seen below

Angular titlecase in typescript component file example

Sometimes, We need to use TitleCasePipe in typescript code. You can use this typescript code.

• In A component, Inject Initialize TitleCasePipe instance
• You can convert capitalize the first letter of the word by calling the transform method inside ngOnInit or button click

import { TitleCasePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-title-case-pipe',
  templateUrl: './title-case-pipe.component.html',
  styleUrls: ['./title-case-pipe.component.scss'],
  providers: [TitleCasePipe]

})
export class TitleCasePipeComponent implements OnInit {

  constructor(private titlecasePipe: TitleCasePipe) { }
  heading = "angular titlecase example tutorials";
  content = " test content";
  ngOnInit(): void {
    this.content = this.titlecasePipe.transform(this.content);
  }

}

In html template component, you can print

<div>
    <h2>{{ content }}</h2>
</div>

angular titlecase pipe not working

When you are using TitleCasePipe in Angular components, the Following are frequently errors that you encounter.

One Error, ERROR Error: InvalidPipeArgument: '' for pipe ‘TitleCasePipe’

Import CommonModule into app.module.ts as seen below

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Another error NullInjectorError: No provider for TitleCasePipe!

To solve this error, You have to add the Providers with TitleCasePipe in the component as seen below.

import { TitleCasePipe } from '@angular/common';

@Component({
    selector: '',
    templateUrl: '',
    providers: [TitleCasePipe]
})

Conclusion

To Sum up, we have learned the following things

• Angular pipe titlecase component example
• titlecasePipe example in Typescript
• Angular titlecase not working