titlecase pipe in angular 4

Question

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?

Answer 1

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