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 {
/* . . . */
}
Angular 6 solved it with a new feature called Angular Elements.