Generate radio button dynamically inside angular ,based on data

Question

I have a scenario where I'm trying to show radio buttons say one question has two answers as 1) Veg 2)Non-veg ,so when i select veg it has further three options and the third option "Mixture of Vegetable and Fruits" has further question inside it and so on.

The following is the reference json that I'm using

"choices": {
      "1": {
        "text": "Vegeterian",
        "questions": {
          "1": { 
            "choices": {
              "1": { "text": "Only Veggies" },
              "2": { "text": "Only Fruits" },
              "3": {
                "text": "Mixture of Vegetable and Fruits",
                "questions": {
                  "1": {
                    "type_name": "selectOne",
                    "choices": {
                      "1": {
                        "text": "Yes.. No animal product",
                        "questions": {
                          "1": {
                            "type_name": "selectOneOrMore",
                            "choices": {
                              "1": {
                                "text": "You are a nice human being"
                              },
                              "2": {
                                "text": "You are a good human being"
                              }
                            }
                          }
                        }
                      },
                      "2": {
                        "text": "No meat. but other animal product"
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },
      "2": { "text": "Non-Vegeterian"}
    }

and on the angular front I have just shown the outer two option ,how can i dynamically on selection of the radio button add further question if it has further questions and option

    <ng-container *ngFor="let consult of choices | keyvalue; let j = index; trackBy: trackByFn;">
              <td>
                   <input  type="radio" name="radio" id="radio-{{j}}" />
                   <label class="sr-text" for="radio-{{j}}">{{consult.value.text}}</label>
              </td>
   </ng-container>

You can use ng-if to render item based on conditions, knowing that ng-if will not add the item to DOM till the condition met, and when condition fail it'll remove it from DOM, as well as you might give this link stackoverflow.com/questions/44411991/… a look — Falyoun
– Falyoun, Commented Sep 1, 2020 at 9:59
@AbdulrahmanFalyoun that would be great approach if i have a fixed number or question depth but here we cant be sure about the question depth — Swarup Chavan
– Swarup Chavan, Commented Sep 1, 2020 at 10:03

rveerd · Accepted Answer · 2020-09-01 11:05:04Z

0

You can create a component that renders a "question" and a component that renders a "choice". If the choice is itself a question, you use the components recursively.

Some code to show this approach (not tested and you have to adapt it to your own data structure):

@Component({
  template: `
  ...
  <div ngFor="choice in question.choices">
    <appChoice [choice]="choice"
  </div>
  `
})
class QuestionComponent {
  @Input() question;
  ...
}

@Component({
  template: `
  <div ngIf="isQuestion; else notQuestion">
    <appQuestion [choices]="choice.question">
  </div>
  <ng-template #notQuestion>
    ...
  </ng-template>
  `
})
class ChoiceComponent {
  @Input() choice;
  get isQuestion() { return !!this.choice.question; }
  ...
}

edited Sep 1, 2020 at 11:05

answered Sep 1, 2020 at 10:28

rveerd

4,0661 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate radio button dynamically inside angular ,based on data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related