Why Angular 2 doesn't let me create set of child views inside div-block using *ngFor?

The case:

import {Component, Input} from '@angular/core';
import {ChoiceComponent} from './choiceponent';
import {Question} from './model/Question';

@Component({
    selector: 'question',
    template: `
    <div class="panel">
    {{question.text}}
    <choice *ngFor="let choice of question.choices" [choice]="choice">
    </div>
    `,
    directives: [ChoiceComponent]
})
export class QuestionComponent {

    @Input()
    question: Question; // Input binding from category ponent ngFor
}

causes

EXCEPTION: Template parse errors:
Unexpected closing tag "div" ("
    <div class="panel">
    <choice *ngFor="let choice of question.choices" [choice]="choice">
    [ERROR ->]</div>
    "): QuestionComponent@3:4

However following works fine, but I want to have question and choice buttons inside a same panel.

<div class="panel">
  {{question.text}}
</div>
<choice *ngFor="let choice of question.choices" [choice]="choice">

Why Angular 2 doesn't let me create set of child views inside div-block using *ngFor?

The case:

import {Component, Input} from '@angular/core';
import {ChoiceComponent} from './choice.ponent';
import {Question} from './model/Question';

@Component({
    selector: 'question',
    template: `
    <div class="panel">
    {{question.text}}
    <choice *ngFor="let choice of question.choices" [choice]="choice">
    </div>
    `,
    directives: [ChoiceComponent]
})
export class QuestionComponent {

    @Input()
    question: Question; // Input binding from category ponent ngFor
}

causes

EXCEPTION: Template parse errors:
Unexpected closing tag "div" ("
    <div class="panel">
    <choice *ngFor="let choice of question.choices" [choice]="choice">
    [ERROR ->]</div>
    "): QuestionComponent@3:4

However following works fine, but I want to have question and choice buttons inside a same panel.

<div class="panel">
  {{question.text}}
</div>
<choice *ngFor="let choice of question.choices" [choice]="choice">

• javascript
• html
• css
• angularjs
• angular

3 Answers 3

Parser expects <choice> tag to be closed first until <div>.

Try following

<div class="panel">
  {{question.text}}
  <choice *ngFor="let choice of question.choices" [choice]="choice">
  </choice>
</div>

Try this one :-

<div class="panel" *ngFor="let choice of question?.choices">
 {{question.text}}
 <choice [choice]="choice"> </choice>
</div>

By doing so you are repeating div block and for each repeat there is one text and button. if something unclear yet please ask me or post plunker if possible.

I would consider to Close with </choice>