[SOLVED] Angular Pipes with template strings that are inserted through [innerHTML]

Angular Pipes with template strings that are inserted through [innerHTML]

I was trying to implement ngx-translate in one of the recently completed angular projects. In the project we have a component that renders HTML files inside a certain div through innerHTML. Now as I am planning to use pipe to transform the HTML file text as per the language I wanted to bind the texts inside the HTML string with template strings like so:

     <tr>
                    <th class="border-top-0">${this.test}</th>
    // the above is just to verify is pipe works as it will later be changed to:
// ${'HELLO' | translate:param} 
                    <th class="border-top-0">Description</th>
                    <th class="border-top-0">Action?</th>
                </tr>

The way I prepare the HTML file to be rendered inside a component:

component.ts:

 this._httpClient.get(path, { responseType: "text" }).subscribe(
    data => {
      const htmlStr = this.sanitizer.bypassSecurityTrustHtml(data);
      this.htmlString = eval('`' + htmlStr + '`');
    });
});

.HTML:

 <div  [innerHTML]="htmlString">    </div>

Till the above-mentioned steps, it works fine and the HTML is rendered as expected but now when I try to use any kind of pipe with it for example: ${this.test | uppercase} it gives the following error:

uppercase is not defined

Is there any way to achieve the desired outcome?

Solution

Hmm. I think (haven't tested it) you can still use pipeName.transform() like:

<th class="border-top-0">
    ${ this.translationPipe.transform('General Kenobi') }
</th>

which is not ideal solution.
But a solution nonetheless.