web-dev-qa-db-ja.com

angular 4のタイトルケースパイプ

Angular 4では、新しい「タイトルケース」パイプ「|」が導入されました各Wordの最初の文字を大文字に変更するために使用します。

例として、

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

TypeScriptコードで可能ですか？そしてどうやって？

angularpipe
15
Ramesh Rajendran

はい、TypeScriptコードで可能です。 Pipeのtransform()メソッドを呼び出す必要があります。

あなたのテンプレート：

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

あなたの.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);
    }
}

AppModuleプロバイダーにTitleCasePipeを追加する必要があります。 TypeScriptコードのボタンクリックまたは他のイベントで変換を呼び出すことができます。

PLUNKER DEMO へのリンクはこちら

26
Faisal