Version 2.0.0 Unable to bind to 'ngIf' because this is not a known property of 'div'

Question

I get an error * ngIf any ideas what might be wrong? I am using the latest version (2.0.0) of Angular 2.

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
</div>
</div>
<div class='row' [ERROR ->]*ngIf='listFilter'>
<div class='col-md-6'>
<h3>Filtered by: {{ listFilter"): EventlogComponent@12:25
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
</div>

Here is my HTML I have a listFilter defined in Component.ts below

<div class='panel panel-primary'>
    <div class='panel-heading'>
        {{ pageTitle }}
    </div>

    <!-- Filter the eventlogs   -->
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type='text' [(ngModel)]='listFilter' />
            </div>
        </div>
        <div class='row' *ngIf='listFilter'>
            <div class='col-md-6'>
                <h3>Filtered by: {{ listFilter }} </h3>
            </div>
        </div>
        <div class='has-error' *ngIf='errorMessage'>{{ errorMessage }}</div>

        <div class='table-responsive'>
            <table class='table' *ngIf='eventlogs && eventlogs.length'>
                <thead>
                    <tr>
                        <th>Event ID</th>
                        <th>Tenant</th>
                        <th>Composition</th>
                        <th>Composition Execution</th>
                        <th>Instrument</th>
                        <th>Start Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor='let eventlog of eventlogs | eventlogFilter:listFilter'>
                        <td> <a [routerLink]="['/eventlog', eventlog.id]">
                            {{ eventlog.id }}
                            </a>
                        </td>
                        <td>{{ eventlog.tenant }} </td>
                        <td>{{ eventlog.composition }} </td>
                        <td>{{ eventlog.compositionExecution }}</td>
                        <td>{{ eventlog.instrument }}</td>
                        <td>{{ eventlog.startTime }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Component.ts, listFilter is declared

import { Component, OnInit}  from '@angular/core';

import { IEventlog } from './eventlog';
import { EventlogService } from './eventlog.service';

@Component({
    templateUrl: 'app/eventlogs/eventlog.component.html',
    styleUrls: ['app/eventlogs/eventlog.component.css']
})
export class EventlogComponent implements OnInit {
    pageTitle: string = 'Monitor Event Log';
    listFilter: string = ' ';
    errorMessage: string;
    eventlogs: IEventlog[];

    constructor(private _eventlogService: EventlogService) {

    }

    ngOnInit(): void {
           this._eventlogService.getEventlogs()
                     .subscribe(
                       eventlogs => this.eventlogs = eventlogs,
                       error =>  this.errorMessage = <any>error);
    }

}

Answer 1

For others who came here on the same issue, I started putting all my components in function modules, so I came up with the same error after googling just found this in the angular white papers :

More precisely, NgIf is declared in the CommonModule from @ angular / common.

CommonModule , , ngIf ngFor.

BrowserModule CommonModule . , BrowserModule CommonModule.

, .