Angular 7 Pipes - Capitalize a String using TitleCasePipe

Transforms text to title case. Capitalizes the first letter of each word of a string, and transforms the rest of the word to lower case.

Syntax looks like:

 TitleCasePipe :    {{ expression | titlecase }}

 LowerCasePipe : {{ expression | lowercase }}

 UpperCasePip :   {{ expression | uppercase }}

It looks like:

<p>{{'hello anil' | titlecase}}</p> <!-- output will be "Hello Anil" -->

<p>{{'Hello Anil' | lowercase}}</p> <!-- output will be "hello anil" -->

<p>{{'hello anil' | uppercase}}</p> <!-- output will be "HELLO ANIL" -->

Useful Built-in Pipes in Angular 7 or Above:

1.      Async Pipe

2.      Currency Pipe

3.      Date Pipe

4.      Slice Pipe

5.      Decimal Pipe

6.      Json Pipe

7.      Percent Pipe

8.      LowerCase Pipe

9.      UpperCase Pipe

Example:

import { Component } from '@angular/core';

@Component({

    selector: 'app-root',

    template: `

    <div>

        <h2>TitleCase, LowerCase & UpperCase Pipes</h2>

        <p> {{message | titlecase}} </p>

        <p> {{message | lowercase}} </p>

        <p> {{message | uppercase}} </p>

    </div>

    `

})

export class AppComponent {

  message: string = "Hello, I am Anil!";

}