由@Devcon评论

Angular将清理几乎所有的东西，这就是为什么你是
获取纯文本的原因。你想要研究的是ReflectiveInjector
，主要是ComponentFactoryResolver。主要的想法是组件
需要渲染一些其他信息（服务，其他组件等），
所以你使用Injector获取依赖注入refs然后
组件工厂构建你的零件。然后将其插入
ViewChild引用。有一种更复杂的动态
方法，使得使用编译器的组件需要一个
的ModuleWithComponentFactories，这就是实际使用的角度。

在角度上搜索，我接受角度不应该这样做。

因为我必须创建一个必须完全动态的页面用html渲染。我改变了我的json并使用
ng-container 和 ng-template 并使用 ngswitch
我在自己的模板中进行了递归调用，发现它工作正常。

这里给出的例子和我做的几乎一样。
https://***.com/a/40530244/2630817

这里有一个小例子：

 < ng-template #itemsList let-itemsList> 
< div * ngFor =let item of itemsList; let i = index> 
< div [ngSwitch] =item.itemType> 
< div class =form-group* ngSwitchCase ='TEXT'> 
< label> 
 {{item.label}} 
< / label> 
< input id ={{item.name}}value ={{item.value}}type ='text'class ='form-control txtbox ui-autocomplete-input'/> 
< / div> 
< div class =form-group* ngSwitchCase ='PASSWORD'> 
< label> 
 {{item.label}} 
< / label> 
< input id ={{item.name}}value ={{item.value}}type ='password'class ='form-control txtbox ui-autocomplete-input'/> 
< / div> 
< div class =form-group* ngSwitchCase ='BOOLEAN'> 
< label style ='width：40％'> {{item.label}}< / label> 
< div class =form-group>< input id ={{item.name}}type ='checkbox'/>< / div> 

< / div> 
< div class =form-group* ngSwitchCase ='LABEL'> 
< label class =form-control> {{item.label}}< / label> 
< / div> 
< div class =form-group* ngSwitchDefault> 
< label> 
 {{item.label}} 
< / label> 
< select2 class =form-control[data] =GetDropDowndata（item.holderId）[cssImport] =false[width] =300[options] =GetOptions（item.type） ）&GT;&LT; / SELECT2&GT; 
< / div> 
< / div> 
< / div> 
 

I have been trying to find the solution of this problem from two days. Unfortunately, I can not get what I want. I am using Angular5.

<div class="form-group col-md-12" [innerHTML]="GetItemsOfHolder(item.children[1],1,
'UserConfigGroupsLabelHolder') | keepHtml"></div>

This is what my function looks like:

GetItemsOfHolder(item: any,divName:string, recursive: boolean = false,typeName:string="") 
{
return html;
}

Everything works fine, unless The html which I am returning contains one package named Select2 This is what I use to add the html into this div it works very fine. Until I wanted to add the dynamic package.

What I mean is return html contains the package component like this:

itemhtml +="<select2 data-type='"+holderItem.itemType+"' 
[data]='this.dropdownData."+holderItem.name+"'></select2>"  

This just returns the plain text to the browser and doesn't work as expected.

What I want is the string to be turned into component or any other way which works and generates the select2 dropdown.

I have been trying to search so many things.But it doesn't works This is good but I can not understand this And dynamiccomponentloading is deprecated.

Can anyone please give me an idea How can I resolve this problem? Any example would be a great.

As commented by @Devcon

Angular will sanitize pretty much everything so that is why you are getting plain text. What you want to look into is ReflectiveInjector and mainly ComponentFactoryResolver. The main idea is that components need some other info(services, other components, etc) to be rendered, so you use the Injector to get Dependency Injection refs then the Component factory builds your component. You then insert this to a ViewChild reference. There is a more complicated way of dynamically making components that uses the compiler and requires a ModuleWithComponentFactories, this is what angular actually uses.

And searching on the angular, I accept that angular should not be done this way.

As I have to create the fully dynamic page which must be rendered in html. I changed my json little bit and using the ng-container and ng-template and using ngswitch I made recursive call in the template it self and found its working very fine.

I get many advantages using this: The HTML (I render dynamically) itself is in HTML, Code is clean and readable, easily maitainable.

The example given here is pretty much the same I have done. https://***.com/a/40530244/2630817

A small example is here:

<ng-template #itemsList let-itemsList>
  <div *ngFor="let item of itemsList;let i = index">
    <div [ngSwitch]="item.itemType">
        <div class="form-group" *ngSwitchCase="'TEXT'">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type='text' class='form-control txtbox ui-autocomplete-input'/>
        </div>
        <div class="form-group" *ngSwitchCase="'PASSWORD'">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type='password' class='form-control txtbox ui-autocomplete-input'/>
        </div>
        <div class="form-group" *ngSwitchCase="'BOOLEAN'">
            <label style='width:40%'>{{item.label}}</label>
            <div class="form-group"><input id="{{item.name}}" type='checkbox' /></div>

        </div>
        <div  class="form-group" *ngSwitchCase="'LABEL'">
            <label class="form-control">{{item.label}}</label>
        </div>
        <div class="form-group"  *ngSwitchDefault>
            <label>
                {{item.label}}
              </label>
              <select2 class="form-control"  [data]="GetDropDowndata(item.holderId)" [cssImport]="false" [width]="300" [options]="GetOptions(item.type)"></select2>
          </div>
    </div>
  </div>