Presented below is the JSON file which includes a .text component with a text field and a .radio component featuring a radio button. How can we efficiently display them conditionally based on the content of the .json file?
Here's the contents of the .json file:
export const questions =
[
{
"question": "What is your name?",
"type": "text"
},
{
"question": "Are you happy?",
"type": "radio"
},
{
"question": "How are you feeling?",
"type": "text"
}
]
Provided below is the .ts file:
import { Component, OnInit } from '@angular/core';
import {questions} from './questions';
import { RadioComponent } from './radio/radio.component';
import { TextComponent } from './text/text.component';
interface q
{
question: String;
type: String;
}
@Component({
selector: 'app-disposition-wizard',
templateUrl: './disposition-wizard.component.html',
styleUrls: ['./disposition-wizard.component.scss']
})
export class DispositionWizardComponent implements OnInit {
constructor() { }
ques: q[] = questions;
ngOnInit() {
}
}
The HTML file displayed below currently showcases both the text and radio components:
<p *ngFor = "let q of ques">{{q.question}}
<app-text></app-text>
<app-radio></app-radio>
</p>