I am searching for a solution to incorporate a custom pipe into my class. The custom pipe itself ( referenced from this source, many thanks ) involves injecting a dependency (the DomSanitizationService).
import { Pipe, Inject, Injectable } from '@angular/core';
import {DomSanitizationService, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl} from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe {
constructor( protected _sanitizer: DomSanitizationService) { }
public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html':
return this._sanitizer.bypassSecurityTrustHtml(value);
case 'style':
return this._sanitizer.bypassSecurityTrustStyle(value);
case 'script':
return this._sanitizer.bypassSecurityTrustScript(value);
case 'url':
return this._sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this._sanitizer.bypassSecurityTrustResourceUrl(value);
default:
throw new Error(`Unable to bypass security for invalid type: ${type}`);
}
}
}
I can apply this pipe in my HTML template like this:
<div [innerHtml]="myHtmlContent | safe: 'html'"></div>
However, when attempting to use the pipe within my code, such as:
getMyValue():string {
return new SavePipe().transform(this.myHtmlContent, 'html');
// I need to specify something here, I'm aware
}
An error is raised: Invalid number of Arguments, expected 1 argument
I understand that while calling new SavePipe(), I must provide the DomSanitizationService as an argument.
What is the best way to accomplish this? Or rather, how can I modify the Pipe to inject the DomSanitizationService as required?