*ngIf works OK in some parts, but not in others. Angular 2.0.x

Question

I am trying to use *ngIf in a simple component and angular is throwing an error on *ngIf.

Removing the "*ngIf="loggedIn" and it runs. {{loggedIn}} shows true after logging in and false before.

The main app uses the same div to enable menus, which works fine.

I must be doing some simple wrong but it escapes me.

thanks

First the error:

Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div [ERROR ->]*ngIf="loggedIn">
    <div class='panel panel-primary'>
        <div class='panel-heading' >
"): ShowConfigComponent@0:5
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. ("[ERROR ->]<div *ngIf="loggedIn">
    <div class='panel panel-primary'>
        <div class='panel-heading' >
"): ShowConfigComponent@0:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div [ERROR ->]*ngIf="loggedIn">
    <div class='panel panel-primary'>
        <div class='panel-heading' >
"): ShowConfigComponent@0:5
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. ("[ERROR ->]<div *ngIf="loggedIn">
    <div class='panel panel-primary'>
        <div class='panel-heading' >
"): ShowConfigComponent@0:0
    at TemplateParser.parse (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:8446:21)
    at RuntimeCompiler._compileTemplate (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16824:53)
    at eval (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16746:85)
    at Set.forEach (native)
    at compile (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16746:49)
    at ZoneDelegate.invoke (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:203:28)
    at Zone.run (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:96:43)
    at http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:136:47)

Template:

<div *ngIf="loggedIn">
<div class='panel panel-primary'>
    <div class='panel-heading' >
        Shows Configuration {{loggedIn}}
    </div>
</div>

Component:

import { Component, OnInit } from '@angular/core';
import { IShowConfig } from './iShowConfig';
import { AuthService } from '../../shared/AuthService';
import { BrowserModule }  from '@angular/platform-browser';


@Component({
    // selector: 'showconfig',
    templateUrl: 'app/showMenu/showConfig/ShowConfig.component.html'
})

export class ShowConfigComponent implements OnInit {
    pageTitle: string = 'Product List';
    imageWidth: number = 50;
    imageMargin: number = 2;
    showImage: boolean = false;
    listFilter: string = '';
    errorMessage: string;
    shows: IShowConfig[];
    public isLoggedIn: boolean = true;
    // constructor(private _productService: ProductService) {
    constructor(public authSvc: AuthService) {
        this.isLoggedIn = true;
        console.log(`config loggedIn: `);
        console.log(`${AuthService.isLoggedIn}`);
        if (authSvc.user === undefined) {
            console.log('islogin undefine');
        } else {
            console.log('config user: ' + authSvc.user);
        }
        console.log('show config count: ' + AuthService.count);

    }

    public get loggedIn(): boolean {
        if (AuthService.isLoggedIn) {
            return true;
        } else {
            return false;
        }
    }
    toggleImage(): void {
        this.showImage = !this.showImage;
    }

    ngOnInit(): void { }

    onRatingClicked(message: string): void {
        this.pageTitle = 'Show List: ' + message;
    }
}

Answer 1

I found the solution! I think Nicu also guessed what it was.

I didn't import BrowserModule into my ShowConfig.module.ts ie: my @ngmodule.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ShowConfigComponent } from './ShowConfig.component';
import { AuthService } from '../../shared/AuthService';

import { BrowserModule } from '@angular/platform-browser';**

@NgModule({
  imports: [

// The following line was missing

        BrowserModule,
        FormsModule
      ],
  declarations: [
    ShowConfigComponent
  ],
  providers: [

  ]
})
export class ShowConfigModule { }