I've read carefully about these questions: Equivalent of $compile in Angular 2 and How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
And I tried to understand the code in this woring plunker mentioned in these questions. But this plunker cannot be opened anymore.
In my case, I need to generate html dynamically, and in the generated html, it also need to generate components dynamically.
I created a single select with options like this:
<option>aaa {SingleSelect} bbb {text}</option>
<option>aaa {AutoComplete}</option>
<option>aaa {SingleSelect} bbb {text} ccc {MultiSelect}</option>
{...} means a dynamic component, For the first option, if this one is selected, I should replace {SingleSelect} with s single select component, and replace {text} with a input text. For the rest like aaa bbb, it's just simple text, should be displayed as label.
So if I select the first option, it's view should be the same like the following code:
<div>
<span>aaa</span>
<SingleSelect></SingleSelect>
<span>bbb</span>
<input type="text>
</div>
What I have done: I created a directive to generate dynamic component, the dyrective takes a param as Input, if the param is SingleSelect, it will return a SingleSelectComponent.
The problem I have:
I can only generate dynamic component, but how to apply the generated component into a dynamic html?
I tried to use [innerHtml], but since innerHtml can only use static value, inner html with dynamic component seems not work.
A simple example in stackblitz
Anyone knows how to do it?
