Search code examples
angulartypescriptinnerhtmlng-template

How to generate an Angular component with string at runtime?

I have a property pulled from database at runtime that correspond to an Angular selector.

this.stringSelector = "<app-hello></app-hello>";

What is the best way to render "Hello World" like so?

<app-root>
  <app-hello></app-hello>
</app-root>

This is good only for html tags, not Angular selectors: 

<app-root>
  <div [innerHTML]="this.stringSelector | safe: 'html'"></div>
</app-root>

The app-hello component does just one thing:

@Component({
  selector: 'app-hello',
  template: `<h1>Hello World</h1>`
})
export class HelloComponent {
/* . . . */
}
Solution

  • Angular 6 solved it with a new feature called Angular Elements.