0

I am working on Angular questionnaire application part of which, I need to dynamically generate angular html template based on type and structure of question requested. for example I receive three questions where question 1 is radio button selector, question 2 is multiple selector and question three is free text, so in this instance component read three questions with 3 different type and is expected to generate template.html accordingly.

I need to know what is best way to approach this implementation.

one way I can think of dynamically generate html i.e. radio, multiple selector and free text

data is coming from Web API2/ .net core

K.Z
  • 5,201
  • 25
  • 104
  • 240
  • What you're describing sounds like the classic use case for Dynamic components. I ran into this very same issue having a dependency on a legacy product that requires me to receive the html from the server which could contain any infinite variation of forms. Check out this post which will demonstrate how to create dynamic forms as well as hook up to the forms inside. https://stackoverflow.com/questions/48753464/angular-how-to-use-reactive-forms-in-a-dynamic-component – Narm Mar 08 '18 at 15:32
  • checking........ – K.Z Mar 08 '18 at 15:33
  • so I am guessing only solution is dynamic component?.... is there way to inject dom element like we do in javascript i.e. append in html? – K.Z Mar 08 '18 at 15:44
  • Dynamic components seem to be the only way right now. In regards to dom manipulation I believe what you will want to check out is viewchildren and containers: Check out this article: https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02 – Narm Mar 08 '18 at 15:54

1 Answers1

1

You can use the *ngFor and *ngIf directives to generate the template. With *ngIf you can show or hide the questions based on the question's type (selector, radio button...) and with *ngFor you can show the number of questions. Then use Angular interpolation {{}} to display info.

If this is your template:

<div *ngIf="radioButton" *ngFor="let r of radios">
    <radio-button>
        <option>{{ r.firstOption }}</option>
    </radio-button>
</div>

<div *ngIf="question" *ngFor="let q of questions">
    <div>{{ q.questionInfo }}</div>
</div>

In one instance you receive (from a service) a radio button option so you only display the first div as many times as radios length. Other instances would be diferent depending on the info retrieved by the service.

Juan
  • 2,024
  • 3
  • 17
  • 36
  • this may not work, because in one instance I have one radio button for example but in another instance I have 100 question with 30 radio button along with other types and these radio button can be in totally different location – K.Z Mar 08 '18 at 11:32
  • because this so dynamic, I cannot use fix template – K.Z Mar 08 '18 at 11:34
  • in this i still need to say there are two questions, I still need to inject this dynamically in template – K.Z Mar 08 '18 at 14:36
  • any idea how to append string i,e myCustomDiv = "

    My Radio Button

    " to template ???     – K.Z Mar 08 '18 at 15:32
  • The number of questions is represented by the length of the array in the *ngFor directive. If you have 4 questions then you're questions array is of length 4 where each position of the array contains an object with all of the information of the question. Then you can use interpolation to replace the info in the template. – Juan Mar 09 '18 at 07:34