How to avoid ng switch and generate component on type?
<p>I currently am getting an array (in the code below resourceTypes) and with an ngSwitch. As you can see depending on the TypeName I create a different kind of component/directive (config-resource-editor or mvc-resource-editor or ...). However I don t like this code since when I create more resource editors I always have to modify this code etc. How can I refactor the code so I can just create the correct resource-editor depending on the type, without ng-switch.
I looked at ng-content, I think I have to do something with it but I fail to see it.</p>
<p>TL;DR: How can I refactor the code below so I don t have to use ngSwitch anymore but 'couple' the type to a component.</p>
<pre><code> &lt;div *ngFor=&quot;let aType of resourceTypes; let i = index&quot; role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; [ngClass]=&quot;{'active': i==0}&quot; [attr.id]=&quot;aType.Name&quot;&gt;
                &lt;span *ngSwitch=&quot;aType.Name&quot;&gt;
                    {{aType.Name}} tab content here
                    &lt;config-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;Config&quot; template&gt;&lt;/config-resource-editor&gt;
                    &lt;mvc-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;MVC&quot; template&gt;&lt;/mvc-resource-editor&gt;
                    &lt;other-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;Other&quot; template&gt;&lt;/other-resource-editor&gt;
                    &lt;wcf-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;WCF&quot; template&gt;&lt;/wcf-resource-editor&gt;
                    &lt;web-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;Web&quot; template&gt;&lt;/web-resource-editor&gt;
                    &lt;webapi-resource-editor [application]=&quot;application&quot; ngSwitchWhen=&quot;WebAPI&quot; template&gt;&lt;/webapi-resource-editor&gt;
                &lt;/span&gt;
            &lt;/div&gt;
</code></pre>