How to allow html in return of angular2 pipe?

Question

I have a pipe that returns a html string, however the string outputs escaped presumably as a default for security. I\'m sure there must be an option to allow html instead bu

Answer 1

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>

Answer 2

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'
  }
}

Answer 3

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.