Dynamic template based on value rather than variable with ngTemplateOutlet

Question

I\'m trying to mock up a dynamic set of questions. Think of a quiz, where one question is multiple choice, the second is single answer, the third is yes no..etc.

Us

Answer 1

I would change the approach, here my 2 cents:

Create a component for each typology of options (checkbox, radio, select, etc...).

Store them in an constant, mapping the name of the component as string with the component class, such as:

export const optionTypes = {
    'TypeRadio': TypeRadio,
    'TypeCheckBox': TypeCheckBox,
};

In Component:

 private optionsModule: NgModuleFactory; // we have our components for our options declared in OptionsModule, for example
 private optionTypes = optionTypes;

 constructor(private compiler: Compiler) {

        // Declaring Options Module
        this.optionsModule = compiler.compileModuleSync(OptionsModule);
 }

In Component's template:

Note that for this to work, your object data should have the type attributes changed:

questions = [
      { question: "my checkbox question", type: "TypeCheckBox", values: ["checkbox1","checkbox2","checkbox3","checkbox4"] },
      { question: "my radiobutton question", type: "TypeRadio", values: ["radio1","radio2","radio3","radio4"] }
    ];

Summing up:

1. We create an OptionsModule
2. We create a component (with its template and logic) for each option/question type
3. We add the name of these components in the type attribute of our data Object. (or create a simple mapping method that: radio -> TypeRadio)
4. We use NgComponentOutlet to dynamically render our components.
5. We use NgModuleFactory to render those components from an imported module.

Result:

We have a dynamic component loading system for our quizz. Each component has it's logic and offers you huge possibilities for adding cool features and behaviors!

An example of this approach (I used this to have 100% dynamic formfields: inputs, select, radio buttons, checkboxes, etc.): Angular2: Use Pipe to render templates dynamically