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>