Angular2: Unexpected directive value 'undefined' on the View of component

Question

In my Angular2 Application I need to display a list of questions that editors can create. Below each question there can be 0-n answers (options - like 'yes','no', '5', etc.). So I need to load the AnswerComponent out of my QuestionComponent.

However, each answer can have 0-1 question(s) (follow-up questions). This means I have to load the QuestionComponent out of the AnswerComponent as well.

Here is a plunker: http://plnkr.co/edit/1itBVtDu8TD8Etxo4JZh

The QuestionComponent (reduced):

@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 AnswerComponent (reduced):

@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 researching this for over 3 days I know that this is circular dependency. Anyway, I don't know how to resolve this. I need to provide an arbitrary sequence length of questions and answers. I tried forward referencing but I still have the following error message:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'AnswerComponent'

FYI: The application is a backend for an ionic app. Where the user has to answer questions and depending on what he picked, there will be follow-up questions or a result (technically also a question).

If this question is duplicate feel free to show me an answer to this question! But I couldn't find a solution that was working with components that are nested like that.

Thanks a lot!!!

Answer 1

/**
 * Created by Brudus on 11/06/16.
 */
import {Component, OnInit, Input, forwardRef} from "@angular/core";
import {Question} from "./question";
import {Answer} from "./answer";
import {QuestionComponent} from "./question.component";

@Component({
    selector: 'copyright-answer',
    template: `
            <ul *ngIf="answer" 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 *ngIf="copyrightQuestion">
                  <copyright-question [question]="copyrightQuestion"></copyright-question>
                </li>
            </ul>
    `,
    directives: [forwardRef(() => QuestionComponent)]
})

export class AnswerComponent implements OnInit {
    @Input() answer: Answer;

    copyrightQuestion: Question = null;

    constructor() {}

    ngOnInit() {

    }

    onQuestionSave() {
      //content: string, isAnswer: boolean, answers?: Answer[], 
        //        isRoot?: boolean, parentQuestion?: string

        const question: Question = new Question('Follow-up question', false, null,
        false, null);
        this.copyrightQuestion = question;
    }
}

Answer 2

Try Elvis operator ?. inside interpolation.

{{ answer?.answerTxt }}

In case answer is falsy (undefined, null, etc.) it won't access answerTxt member.

answer will be null until you get response.