2.0.0 version Can't bind to 'ngIf' since it isn't a known property of 'div'

Question

I am getting an error on the *ngIf any ideas what could be wrong? I am using 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 it is my HTML I have the listFilter defined in the 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 anyone else coming here for the same issue, I started to put all my components in feature modules so I came with the same error, after googling about just found this in the angular official docs :

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

CommonModule contributes many of the common directives that applications need including ngIf and ngFor.

BrowserModule imports CommonModule and re-exports it. The net effect is that an importer of BrowserModule gets CommonModule directives automatically.

Just imported that module in my new modules and it was solved.