strange behaviour from *ngIf

Question

I am busy with a angular4 app where i'm trying to conditionally hide/show two div elements using *ngIf with very strange results. I want to show the project form when newItem is false or null and show the item form when newItem is true. The div containing the item form gets displayed as it should when newItem is true but the project form doesn't get removed from the dom for some reason... I feel quite comfortable with angular and have been using it for a while but never came accross this issue? Any idea what i'm doing wrong? am I missing something very simple?

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-push-4 page-header">
            <h1>Quote generator</h1>
        </div>
    </div>
    <div class="row">
    <div class="col-md-4 col-md-push-4" *ngIf="!newItem">
        <button class="btn btn-primary pull-right" (click)="addItem()">Add Item</button>
        <form [formGroup]="projectForm" role="form" (ngSubmit)="calculateTotal(projectForm.value)">
            <div class="form-group">
                <label for="pName">Project Name</label>
                <input id="pName" class="form-control" placeholder="Enter project name" type="text" [formControl]="projectForm.controls['name']">
            </div>
            <div class="form-group">
                <label for="markup">Markup(%)</label>
                <input id="markup" class="form-control" placeHolder="Enter markup percentage" type="text" [formControl]="projectForm.controls['markup']">
            </div>
            <div class="form-group">
                <label for="hCost">Hardware cost</label>
                <input id="hCost" class="form-control" placeHolder="Enter hardware cost" type="text" [formControl]="projectForm.controls['hardwareCost']">
            </div>
            <div class="form-group">
                <label for="lCost">Labour cost</label>
                <input id="lCost" class="form-control" placeHolder="Enter labour cost" type="text" [formControl]="projectForm.controls['labourCost']">
            </div>
            <div class="form-group">
                <label for="sCost">Sanding cost</label>
                <input id="sCost" class="form-control" placeHolder="Enter sanding cost" type="text" [formControl]="projectForm.controls['sandingCost']">
            </div>
            <div class="form-group">
                <label for="sdCost">Sundries cost</label>
                <input id="sdCost" class="form-control" placeHolder="Enter Sundries cost" type="text" [formControl]="projectForm.controls['sundriesCost']">
            </div>
            <button class="btn btn-submit pull-right" [disabled]="!projectForm.valid || project.items.length < 1">Calculate</button> 
        </form>
    </div>  
    <div class="col-md-4 col-md-push-4" *ngIf="newItem">
            <form [formGroup]="itemForm" role="form" (ngSubmit)="addItem(itemForm.value)">              
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" id="name" Placeholder="Enter Item Name" [formControl]="itemForm.controls['name']">                              
                </div>
                <div class="form-group">
                    <label for="height">Height</label>
                    <input class="form-control" id="height" type="number" step="0.01" placeholder="Enter item height" [formControl]="itemForm.controls['height']">
                </div>
                <div class="form-group">
                    <label for="length">Length</label>
                    <input class="form-control" id="length" type="number" step="0.01" placeholder="Enter item length" [formControl]="itemForm.controls['length']">
                </div>
                <div class="form-group">
                    <label for="width">Width</label>
                    <input class="form-control" id="width" type="number" step="0.01" placeholder="Enter item width" [formControl]="itemForm.controls['width']">
                </div>
                <div class="form-group">
                    <label for="qty">qty</label>
                    <input class="form-control" id="qty" type="number" step="0.01" placeholder="Enter item Quantity" [formControl]="itemForm.controls['qty']">              
                </div>
                <div class="form-group">
                    <label for="pcbm">Price/m<sup>3</sup></label>
                    <input class="form-control" type="number" step="0.01" placeholder="Enter item Price/cbm" [formControl]="itemForm.controls['priceM2']">
                </div>
                <button class="btn btn-block btn-submit" [disabled]="itemForm.valid">Add</button>
            </form>         
        </div>
    </div>
</div>

Typescript:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { Item } from './models/item.model';
import { Project } from './models/project.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    itemsForm: FormGroup;
    projectForm: FormGroup;
    project: Project;
    item: Item;
    newItem: boolean = null;
    showProject: boolean = true;


    constructor(private fb: FormBuilder) {
        this.itemsForm = fb.group({
            'name': ['', Validators.required],
            'height': ['', Validators.required],
            'length': ['', Validators.required],
            'Width': ['', Validators.required],
            'qty': ['', Validators.required],
            'priceM3': ['', Validators.required],           
        });

        this.projectForm = fb.group({
            'name': ['', Validators.required],
            'markup': ['', Validators.required],
            'hardwareCost': ['', Validators.required],
            'labourCost': ['', Validators.required],
            'sandingCost': ['', Validators.required],
            'sundriesCost': ['', Validators.required]
        });
    }

    calculateTotal(project: any) {

    }

    addItem() {
        this.newItem = true;        
    }

    ngOnInit() {

    }

}

Answer 1

Your error has nothing to do with ngIf. I see a lot of misprints in your code

itemsForm => itemForm 
Width => width 
priceM3 => priceM2

Answer 2

Try this :

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-push-4 page-header">
            <h1>Quote generator</h1>
        </div>
    </div>
    <div class="row">
    <div class="col-md-4 col-md-push-4" *ngIf="!newItem">
        <button class="btn btn-primary pull-right" (click)="addItem()">Add Item</button>
        <form [formGroup]="projectForm" role="form" (ngSubmit)="calculateTotal(projectForm.value)">
            <div class="form-group">
                <label for="pName">Project Name</label>
                <input id="pName" class="form-control" placeholder="Enter project name" type="text" [formControl]="projectForm.controls['name']">
            </div>
            <div class="form-group">
                <label for="markup">Markup(%)</label>
                <input id="markup" class="form-control" placeHolder="Enter markup percentage" type="text" [formControl]="projectForm.controls['markup']">
            </div>
            <div class="form-group">
                <label for="hCost">Hardware cost</label>
                <input id="hCost" class="form-control" placeHolder="Enter hardware cost" type="text" [formControl]="projectForm.controls['hardwareCost']">
            </div>
            <div class="form-group">
                <label for="lCost">Labour cost</label>
                <input id="lCost" class="form-control" placeHolder="Enter labour cost" type="text" [formControl]="projectForm.controls['labourCost']">
            </div>
            <div class="form-group">
                <label for="sCost">Sanding cost</label>
                <input id="sCost" class="form-control" placeHolder="Enter sanding cost" type="text" [formControl]="projectForm.controls['sandingCost']">
            </div>
            <div class="form-group">
                <label for="sdCost">Sundries cost</label>
                <input id="sdCost" class="form-control" placeHolder="Enter Sundries cost" type="text" [formControl]="projectForm.controls['sundriesCost']">
            </div>
            <button class="btn btn-submit pull-right" [disabled]="!projectForm.valid || project.items.length < 1">Calculate</button> 
        </form>
    </div>  
    <div class="col-md-4 col-md-push-4" *ngIf="newItem">
            <form [formGroup]="itemForm" role="form" (ngSubmit)="addItem(itemForm.value)">              
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" id="name" Placeholder="Enter Item Name" [formControl]="itemForm.controls['name']">                              
                </div>
                <div class="form-group">
                    <label for="height">Height</label>
                    <input class="form-control" id="height" type="number" step="0.01" placeholder="Enter item height" [formControl]="itemForm.controls['height']">
                </div>
                <div class="form-group">
                    <label for="length">Length</label>
                    <input class="form-control" id="length" type="number" step="0.01" placeholder="Enter item length" [formControl]="itemForm.controls['length']">
                </div>
                <div class="form-group">
                    <label for="width">Width</label>
                    <input class="form-control" id="width" type="number" step="0.01" placeholder="Enter item width" [formControl]="itemForm.controls['width']">
                </div>
                <div class="form-group">
                    <label for="qty">qty</label>
                    <input class="form-control" id="qty" type="number" step="0.01" placeholder="Enter item Quantity" [formControl]="itemForm.controls['qty']">              
                </div>
                <div class="form-group">
                    <label for="pcbm">Price/m<sup>3</sup></label>
                    <input class="form-control" type="number" step="0.01" placeholder="Enter item Price/cbm" [formControl]="itemForm.controls['priceM3']">
                </div>
                <button class="btn btn-block btn-submit" [disabled]="itemForm.valid">Add</button>
            </form>         
        </div>
    </div>
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    itemForm: FormGroup;
    projectForm: FormGroup;
    project: any;
    item: any;
    newItem: boolean = false;
    showProject: boolean = true;


    constructor(private fb: FormBuilder) {
        this.itemForm = fb.group({
            'name': ['', Validators.required],
            'height': ['', Validators.required],
            'length': ['', Validators.required],
            'width': ['', Validators.required],
            'qty': ['', Validators.required],
            'priceM3': ['', Validators.required],
        });

        this.projectForm = fb.group({
            'name': ['', Validators.required],
            'markup': ['', Validators.required],
            'hardwareCost': ['', Validators.required],
            'labourCost': ['', Validators.required],
            'sandingCost': ['', Validators.required],
            'sundriesCost': ['', Validators.required]
        });
    }

    calculateTotal(project: any) {

    }

    addItem() {
        this.newItem = true;
    }

    ngOnInit() {

    }

}