Angular10 TitleCasePipe

Introduction

Angular10 TitleCasePipe is a built-in pipe available in Angular10 which is used for transforming a given string to title case format. The title case format changes the first alphabet of every word in a sentence or a string to a capitalized alphabet. This pipe takes a string as input and returns a new string as output, which is transformed into title case format.

Example

Let's suppose we have a string "the quick brown fox". Using TitleCasePipe, we can transform this string to "The Quick Brown Fox" by using the TitleCasePipe. Let's look at the code snippet for this example:

<p>{{ 'the quick brown fox' | titlecase }}</p>

The output of this code will be:

The Quick Brown Fox

Implementation

To use the TitleCasePipe, we need to import it from the '@angular/common' module in our component module. Once imported, we can use it in our HTML template as shown in the above example.

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

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

Conclusion

In this article, we learned about the Angular10 TitleCasePipe, which is used for transforming a given string to title case format. We looked at an example of how to use it and also saw an implementation in Angular.