My Angular2 Application requires me to showcase a list of questions that editors can generate. Each question can have 0 to n answers (options - such as 'yes', 'no', '5', etc.). To achieve this, I need to load the AnswerComponent from my QuestionComponent.
Furthermore, each answer may lead to 0-1 follow-up questions. This implies that I also have to load the QuestionComponent from the AnswerComponent.
For reference, here is a plunker: http://plnkr.co/edit/1itBVtDu8TD8Etxo4JZh
The simplified QuestionComponent:
@Component({
selector: 'copyright-question',
template: `
<div class="col-md-8">
<strong>{{ question?.content }}</strong>
<div class="row-actions">
<span *ngIf="!question?.isAnswer" class="addAnswer"><button (click)="onAddAnswer()">Add Answer</button></span>
</div>
</div>,
<li *ngFor="let answer of question.answers">
<copyright-answer [answer]="answer"></copyright-answer>
</li>
`,
directives: [AnswerComponent]
})
The simplified AnswerComponent:
@Component({
selector: 'copyright-answer',
template: `
<ul class="col-md-12">
<li><strong>{{ answer.answerTxt }}</strong></li>
<li>
<div class="row-actions">
<span>
<span><button (click)="onQuestionSave()">Add follow-up question</button></span>
</span>
</div>
</li>
<!-- Follow Up Question -->
<li>
<copyright-question [question]="copyrightQuestion"></copyright-question>
</li>
</ul>
`,
directives: [QuestionComponent]
})
After extensive research for over 3 days, it's clear that there is a circular dependency issue. Unfortunately, I am unsure how to resolve this. The requirement is to offer an arbitrary sequence length of questions and answers. I attempted forward referencing but encountered the following error message:
EXCEPTION: Unexpected directive value 'undefined' on the View of component 'AnswerComponent'
For your information, the application serves as a backend for an ionic app. Users are required to respond to questions, which may lead to follow-up questions or a final result (also considered a question technically).
If this question appears duplicated, kindly guide me to an existing solution. However, I couldn't find one that caters to components nested in this manner.
Thank you very much!!!