I'm trying to render an HTML string template that refers internal angular components & directives which are part of the app.

The question is that bind is lost in components and I don't know how to "preload" directives just like we do with components through entryComponents.

I created a demo project to better explain/demonstrate what I'm trying to achieve with dynamic templates:

There are 3 samples in my demo project:

Sample #1 - Common usage scenario - components are referenced inside my main component and work as expected

Sample #2 - [innerHTML] which obviously doesn't meet the requirements.

Sample #3 - Dynamic render which doesn't work for components since bind is broken and directives are not processed.

https://stackblitz.com/edit/angular-dynamic-html-1pcrbx?file=app/app.component.html

@Component({

})
class MyComponent {

constructor() {}

private myTemplate = `
<hello name="TEST"></hello>
<div test>My div referencing a custom directive</div>
`;

}

• So, is it possible to do what I'm tying to do? What am I doing wrong?