Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

In Angular2 you should use DynamicComponentLoader to insert some “compiled content” on the page. So for example if you want to compile next html:

<div>
    <p>Common HTML tag</p>
    <angular2-component>Some angular2 component</angular2-component>
</div>

then you need to create component with this html as a template (let’s call it CompiledComponent) and use DynamicComponentLoader to insert this component on the page.

@Component({
  selector: 'compiled-component'
})
@View({
  directives: [Angular2Component],
  template: `
    <div>
      <p>Common HTML tag</p>
      <angular2-component>Angular 2 component</angular2-component>
    </div>
  `
})
class CompiledComponent {
}

@Component({
  selector: 'app'
})
@View({
  template: `
    <h2>Before container</h2>
    <div #container></div>
    <h2>After conainer</h2>
  `
})
class App {
  constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
    loader.loadIntoLocation(CompiledComponent, elementRef, 'container');
  }
}

Check out this plunker

UPD You can create component dynamically right before the loader.loadIntoLocation() call:

// ... annotations
class App {
  constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {
    // template generation
    const generatedTemplate = `<b>${Math.random()}</b>`;

    @Component({ selector: 'compiled-component' })
    @View({ template: generatedTemplate })
    class CompiledComponent {};

    loader.loadIntoLocation(CompiledComponent, elementRef, 'container');
  }
}

I personally don’t like it, it’s look like a dirty hack to me. But here is the plunker

PS Beware that at this moment angular2 is under active development. So situation can be changed at any time.