NgSwitch or ComponentFactoryResolver?

Question

I'm writing an app that lists some users and displays an information page when a user is clicked. The users are of different types (about 20 types) and the details page differs for each user type in layout and functionality.

I have a main DetailsComponent and 20 specific components (Type1DetailsComponent, Type2DetailsComponent, etc.) that must be displayed inside the main DetailsComponent.

I thought of two ways to implement this:

1. Use NgSwitch in the DetailsComponent to choose the specific component
2. Use ComponentFactoryResolver and ViewContainerRef to create the specific component needed and display it inside DetailsComponent

The first method requires that all SpecificDetailsComponents be listed in the NgSwitch, reducing scalability.

The second method seems better, but it has a few drawbacks:

• a target element is needed to place the dynamically created component. The new component cannot replace the target element, but is placed after it. That looks like clutter.
• @Input and @Output are not automatically set by Angular when creating the components.

Is there anything I can do to improve the second method?

Are there any better methods of achieving the goal?

Answer 1

The target element does get replaced I believe, but either way it's just one errant element if it doesn't. The CFR is going to be ~50% faster even if the components are complicated I think.