NgFor Template Parse Error

Question

I am new to AngularJs 2 And I am trying NgFor to work but I have this error and I can't figure out what's wrong:

skills.template.html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="skills-container">
        <div *ngFor="let item of [0,1,3,4,5];">Try</div>
    </div>
</div>

skills.compontent.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import {Candidate} from "../../../../models/Candidate";
import {Input} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'skills',
  templateUrl: 'skills.template.html',
  providers:[NgbModal]
})
export class skillsComponent implements OnInit {
  @Input() selectedCandidate:Candidate;


  constructor(private modalService:NgbModal){ }

  ngOnInit(){}

  launchSkillsModal(e:any, content:any){
    const modalRef = this.modalService.open(content);
    e.preventDefault();
  }

}

I am just trying a simple loop but I get

 main.bundle.js:6017Error: Template parse errors:(…)(anonymous function) @         main.bundle.js:6017ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401

Answer 1

Seems like you are using older Angular 2 version, as providers from component metadata have been deprecated already. In your case it would work like using older syntax #item instead of let item.

*ngFor="#item of [0,1,3,4,5];"

Though I'll highly recommend you to update your angular version to latest release version (2.4.1)