Ionicでカスタムパイプを作成する

あるページ内で利用するカスタムパイプを作成する．ngForで繰り返した要素に対して文字列をサニタイズする方法について．一つの要素だけであれば下記方法に従えばできるが，ngForで繰り返した要素に対してサニタイズする方法について． https://webbibouroku.com/Blog/Article/angular-safe-html

ionic g pipe app-summarization/customPipe1

そうすると，そのページのモジュールページに下記のコードが追加される．もしされない場合は手動で追加する． import { CustomPipe1Pipe } from ‘./custom-pipe1.pipe’; @NgModule({ imports: [ **], declarations: [**,CustomPipe1Pipe] }) 今回はcustom-pipe1.pipe.tsでサニタイズするので

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHTML'
})
export class CustomPipe1Pipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(code) {
    return this.sanitizer.bypassSecurityTrustHtml(code);
  }
}

使う場所はこんな感じ

    <div *ngFor="let message of messages;">
      <div [ngSwitch]="message['isAi']">
         <div *ngSwitchCase="'true'">
           <div class="media" >
             <div class="media-left">
               <a href="#" class="icon-rounded">AI</a>
             </div>
             <div class="media-body">
               <h4 class="media-heading">Sunny Date:2021/04/17</h4>
               <div [innerHTML]="message.message">{{message.message| sanitizeHTML}}</div>
             </div>
           </div>
         </div>
      </div>
    </div>