I am trying to achieve something like this:
I have a model class called ObjectTypeA, ObjectTypeB and ObjectTypeC.
There is also a factory ComponentFactory, which based on the type of object passed in will create different components:
ComponentFactory.ts
export interface ComponentFactoryInterface {
static CreateComponent(obj: CommonSuperObject)
}
@Injectable()
export class ComponentFactory {
public static CreateComponent(obj: CommonSuperObject){
if (obj instanceof ObjectTypeA){
return ObjectComponentA()
}else if (obj instanceof ObjectTypeB){
return ObjectComponentB()
}
}
}
In the template I would like to do something like this:
main_template.html
<components>
<component *ngFor="#obj in objects">
<!-- insert custom component template here -->
</component>
</components>
How do I insert the associated components dynamically ?
I could do something like this (not my preferred way of doing it):
<components>
<!-- loop over component models -->
<custom-component-a *ngIf="models[i] instanceof ObjectTypeA">
</custom-component-a>
<custom-component-b *ngIf="models[i] instanceof ObjectTypeB">
</custom-component-b>
</components>
But this is seems really wrong to me on many levels (I would have to modify this code and the factory code if I add another component type).
Edit - Working Example
constructor(private _contentService: ContentService, private _dcl: DynamicComponentLoader, componentFactory: ComponentFactory, elementRef: ElementRef){
this.someArray = _contentService.someArrayData;
this.someArray.forEach(compData => {
let component = componentFactory.createComponent(compData);
_dcl.loadIntoLocation(component, elementRef, 'componentContainer').then(function(el){
el.instance.compData = compData;
});
});
}
