How to pass DomSanitizer as an argument in typescript to a pipe?

Question

I am using a pipe to display feathericons which has the following code :

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

import { icons } from 'feather-icons'; // v4+

@Pipe({ name: 'feather' })
export class FeatherIconsPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(icon: string, size: number = 18, color: string = 'inherit', float: string = 'inline-end') {
    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
      width: size,
      height: size,
      color: color,
      float: float
    }));
  }
}

As you can see, it uses a DomSanitizer. I use the pipe in HTML like this :

 <span [innerHTML]="'home' | feather"></span>

It works fine. But now I need to do the same via typescript. I tried :

const span = this._renderer2.createElement('span');
let name = new FeatherIconsPipe().transform('home');
this._renderer2.setProperty(span, 'innerHTML', name);

But it throws error :

Expected 1 arguments, but got 0.ts(2554) feather-pipe.ts(9, 15): An argument for 'sanitizer' was not provided.

Then I tried

private sanitizer : DomSanitizer = this.sanitizer;
...
let name = new FeatherIconsPipe(this.sanitizer).transform('home');

But the pipe outputs :

Cannot read property 'bypassSecurityTrustHtml' of undefined.

How can i set the innerHTML with pipe using typescript?

Answer 1

Need to inject sanitizer to the constructor in your component

  constructor(private _renderer2: Renderer2, private sanitizer: DomSanitizer){

     new FeatherIconsPipe(this.sanitizer).transform('home');

Demo