2017年10月23日

Angularでカスタムパイプを作る

./pipe/ellipsis.pipe.ts として省略用のパイプを作成します。PipeTransformで対象の文字列や引数(ex :foo :bar)が取得できますので変換してリターンで返すだけです。
以下のサンプルではN文字(初期値は50)以上の場合は...と省略されるパイプを作成しています。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'ellipsis'
})

export class Ellipsis implements PipeTransform {
transform(value: string, length: number = 50 , ommission: string = '...'): any {
if ( value.length < length) {
return value;
} else {
return value.substring(0 , length) + ommission;
}
}
}


作成したパイプはapp.module.tsで登録しておきます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ellipsis } from './pipe/ellipsis.pipe';

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


これで以下のように利用することができます。

<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 20}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 50 : '〜'}}</p>
<p [innerHTML] = "'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis"></p>
posted by ねこまんま at 10:31 | Comment(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。