Used two pipes to make an html markup, from my database, safer and shorter:
@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
. . .
}
}
}
and
@Pipe({
name: 'summary'
})
export class SummaryPipe implements PipeTransform {
transform(content: string, characterLimit: number): string {
if (content.length <= characterLimit) {
return content;
} else {
return `${content.substring(0, characterLimit)}...`;
}
}
}
Using it with one pipe it works:
<div [innerHtml]="blog.content | safe: 'html'"></div>
But with the second pipe it stops showing:
<div [innerHtml]="blog.content | safe: 'html' | summary:100"></div>
How can I fix it ?
