CODEWITHSUNDEEP
angularpipe
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

titlecase pipe in angular 4

Angular 4 introduced a new 'titlecase' pipe '|' and use to changes the first letter of each word into the uppercase.

The example as,

<h2>{{ 'ramesh rajendran` | titlecase }}</h2>
<!-- OUTPUT - It will display 'Ramesh Rajendran' -->

Is it possible in typescript code? And How?

Upvotes: 41

Views: 65010

Answers (2)

Kateryna Savenko
Kateryna Savenko

Reputation: 257

Yes, you can use it like this 

<h2>{{ 'ramesh rajendran' | titlecase }}</h2>

But, don't forget to import CommonModule into your module.

@NgModule({
  imports: [
    CommonModule,
    ...
  ],

Upvotes: 19

FAISAL
FAISAL

Reputation: 34673

Yes it is possible in TypeScript code. You'll need to call the Pipe's transform() method.

Your template:

<h2>{{ fullName }}</h2>

In your .ts:

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

export class App {

    fullName: string = 'ramesh rajendran';

    constructor(private titlecasePipe:TitleCasePipe ) { }

    transformName(){
        this.fullName = this.titlecasePipe.transform(this.fullName);
    }
}

You'll need to add TitleCasePipe in yout AppModule providers. You can call the transformation on button click or some other event in the typescript code.

Here is a link to PLUNKER DEMO

Upvotes: 70

Related Questions