Angular 2 component *ngFor template parse error

Question

I have the following error from angular 2:

EXCEPTION: Template parse errors:
Parser Error: Unexpected token . at column 26 in [ngFor let button of modal.buttons] in ModalComponent@11:22 ("">
                        <button type="button" class="btn" data-dismiss="modal"
                          [ERROR ->]*ngFor="let button of modal.buttons"
                          [ngClass]="button.classes"
                   "): ModalComponent@11:22

This is my code:

import {Component} from 'angular2/core';
import {NgFor, NgClass} from 'angular2/common';

import {EventService} from '../services/event.service';

interface Button {
  text: string;
  classes: Array<string>;
  clicked: Function;
}

interface Modal {
  title: string;
  text: string;
  buttons: Array<Button>;
}

@Component({
  selector: 'modal',
  template:  `<div *ngIf="modal" class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">{{modal.title}}</h4>
                  </div>
                  <div class="modal-body" [innerHTML]="modal.text"></div>
                  <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal"
                      *ngFor="let button of modal.buttons"
                      [ngClass]="button.classes"
                    >{{button.text}}</button>
                  </div>
                </div>
              </div>`,
  directives: [NgFor, NgClass]
})
export class ModalComponent {
  modalElement: HTMLElement;
  modal: Modal = [...];

  [...]

}

I try to generate a modal component, without the buttons it works fine. Why is this wrong? Why cant angular iterate over an object child array? I am searching for hours, please help

Skyway

I tried to use elvis operator ( ? ), but does not work, too – Skyway

Answer 1

In angular2.rc1 syntax of *ngFor has changed, from *ngFor="#item in items" to *ngFor="let item in items";

You are using new syntax, but have old version of angular2. I supposed it based on your imports (you are referencing to 'angular2/...', instead of '@angular/...').

Try old syntax or update to new version of angular.

Cement

The old syntax das not work and @angular does not work either – Skyway

i use 2.0.0-beta.7 – Skyway

Is it impossible to use rc1? do you have some other dependencies? beta.7 is very old, do not recommend to spend time on it. – Cement

system-config.js also needs to be configured properly. can you provide more details on error? what it say for @angular?.. – Cement

That error is not related to ngFor, at first you need to setup working environment of angular2, after, *ngFor will work. – Cement

I update the hole angular project and know it works, thx a lot – Skyway

you welcome :) - It is cool framework, I love it. Also watch for development of angular2-cli (cli.angular.io). It has usefull commands to simplify creation of environment, build, test, etc. – Cement

The latest syntax for *ngFor (rc6) is *ngFor="let item of items" – Cruiser

For final version you have to use: *ngFor="let item of items" – Whitener

Answer 2

The above answer is correct for *ngFor, however, the "template" tag's format is slightly different.

Before RC0 and RC1:

<template ngFor #team [ngForOf]="teams">

After RCx:

<template ngFor let-team [ngForOf]="teams">

Where team is the "for of" variable iterated through teams. The # is still used! If you want access to an html component:

<input #numberInput step="0.1" type="number">

Notice nothing has changed here. The way to think about this is; 'let' is used for variables of data; '#' is used to get access to html components.

For further change details, please always refer first to: https://github.com/angular/angular/blob/master/CHANGELOG.md

Bathometer

Answer 3

*ngFor="let item in items";

Try like this still not work means please ensure the

import { CommonModule } from '@angular/common';

are injected in module.ts or not this also done meas

ensure all given element are correct with spelling and

corresponding close tag are present

Claypool