*ngFor not working for html table(angular 2)

html ngFor not working for html table

<!DOCTYPE html>
<html>

<body>
    <div class="row">
        <div class="col-xs-12 col-md-offset-4">
            <table  class="table table-striped">
                <tr *ngFor="category of categoriesInfo" >
                    <td data-title="'Name'">
                        <a>{{category.CategoryName}}</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm">Delete</button>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</body>
</html>

component I am getting the data from database but unable to do a ngFor ,Please find the error Information below

import { Component,OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { CategoriesService } from './categories.component.service';
import { EventsEmitter } from '../../../assets/scripts/services/eventsEmitter';

@Component({
    selector: 'categories',
    templateUrl: 'app/components/admin/categories/categories.component.html',
    styleUrls: ['app/components/admin/categories/categories.component.css'],
    providers: [CategoriesService]
})
export class CategoriesComponent {
    categoriesInfo: any;

    constructor(
        private router: Router,
        private categoriesService: CategoriesService,
        private eventsEmitter: EventsEmitter) {
    }

    ngOnInit() {
        this.getCategoriesResource();
    }

    getCategoriesResource() {
        this.categoriesService.getCategoriesResource()
            .subscribe(response => {
                debugger;
                this.categoriesInfo = response;
            },
            error => {
                this.eventsEmitter.broadcast('Error', 'Error Occured');
            });
    }


}

error information my application breaks , can you please tell me what changes do i make to make it work

App Module I am using only one module in my application

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule, JsonpModule, Http, RequestOptions, XHRBackend, RequestOptionsArgs, Response, ConnectionBackend} from '@angular/http';
import { AppRoutingModule } from './app.routes';

import { AppComponent }  from './app.component';
import { CategoriesComponent } from './components/admin/categories/categories.component';


import { LoadingInterceptor } from './assets/scripts/services/loadingInterceptor';
import { EventsEmitter } from './assets/scripts/services/eventsEmitter';
import { ToasterModule} from 'angular2-toaster';

@NgModule({
    imports: [AppRoutingModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, JsonpModule, ToasterModule ],
    declarations: [AppComponent, CategoriesComponent],
    bootstrap: [AppComponent],
    providers: [EventsEmitter,LoadingInterceptor,
        {
           provide: Http,
           useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, eventsEmitter: EventsEmitter) => new LoadingInterceptor(xhrBackend, requestOptions, eventsEmitter),
           deps: [XHRBackend, RequestOptions,EventsEmitter]
        },{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppModule { }

Solution

You need to import CommonModule for directive *ngFor and use let as garth74 said:

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


@NgModule({
  imports: [ CommonModule ],  // use 'imports' not 'import', s is mandatory
  ...
})