How Render Angular Components Conditionally

Question

Supposing I have the following structure in my project. It has one module for each client witch declare custom components and a common module which declares the default component if this client has no implementations for it.

/company-module-a/register-form-screen
/company-module-a/register-form-screen/part-1-form-component
/company-module-a/register-form-screen/part-2-form-component

/company-module-b/register-form-screen/
/company-module-b/register-form-screen/part-1-form-component
/company-module-b/register-form-screen/part-4-form-component

/common-module/register-form-screen/
/common-module/register-form-screen/part-1-form-component
/common-module/register-form-screen/part-2-form-component
/common-module/register-form-screen/part-3-form-component
/common-module/register-form-screen/part-4-form-component

I wish by default to use common components and then use the company components if it has components with the same name then company component is used, but it is not possible in Angular. Another solution is to implement all components in all modules, if the company module has no difference from common module, just extend it, then the module is imported by routing. Are there other solutions for this structure issue, improving code reuse? The company module is defined by the company name of the current authenticated user, and is stored in browser local-storage.

Answer 1

Since component selectors are resolved by the angular compiler at compile time, you need a structural directive to defer component resolution to runtime.

For instance, you could use *ngIf or *ngSwitch to choose which component to render.

Note that this approach requires all components to be bundled, irrespective of which components are actually used at runtime. If you have many components, or care about bundle size, compiling separate bundles per company might be the better way to go.