How to allow html in return of angular2 pipe?

Use bindings to innerHTML or outerHTML to render already escaped html. For example <span [innerHTML]="someString | toHtmlPipe"></span>. See this plunk:

@Pipe({  name: 'wrapBold'})class WrapBold {  transform(content) {    return `<b>${content}</b>`;  }}@Component({  selector: 'my-app',  pipes: [WrapBold],  template: `    <div>      Hello <span [outerHTML]="content | wrapBold"></span>    </div>  `})export class App {  constructor() {    this.content = 'Angular2'  }}

I don't know if that is possible with a pipe. (It is, see @alexpods's answer.)

Have you considered converting your pipe into a component with an input property? I.e., whatever is feeding your pipe, make that an input property of the component. Put the HTML that the pipe generates into the component's template.

So thanks for replies.

Using the outerHTML binding suggested by @alexpods worked a treat.Didn't need to change my pipe at all.

So what I was doing before:

{{'TEXT' | hn: 'h2.whatever'}} which resulted in the correct html but escaped ie.

<h2 class="whatever">TEXT</h2>

Works great as: <span [outerHTML]="'TEXT' | hn:'h2.whatever'"></span>

which outputs: <h2 class="whatever">TEXT</h2>