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