{

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


Angular titlecase pipe 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

Angular titlecase pipe example

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
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Best 5 ways to remove the duplicate object from array In javascript| Fastest way delete duplicates in typescript

Best Five ways to iterate enum in typescript with examples?

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

How to Convert JSON Object to Interface or class in typescript?

How to Convert Number to/from String in typescript?

How to create an array of multiple types in Typescript

How to declare static constants in Typescript and Angular