Angular 2 Template parsing error when using ngFor inside div

Question

Why doesn't Angular 2 allow me to create a set of child views inside a div block using * ngFor?

Happening:

import {Component, Input} from '@angular/core'; import {ChoiceComponent} from './choice.component'; 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 component 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, the following works are fine, but I want to have the question and selection buttons inside the same panel.

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

Answer 1

The parser expects the <choice> be closed first before the <div> .

Try to execute

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

Answer 2

Try the following: -

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

This way you repeat the div block, and for each repeat there is one text and a button. if something is unclear, please ask me or send the plunker, if possible.

Answer 3

I would think of closing with </choice>