Angular2 *ngIf Hiding the contents of a Div in the Template

Question

I'm working on a form on my first Angular2 project, and I can't seem to get my *ngIf to hide a div in my template.

Here's my component file:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Address } from './signup'

@Component({
  selector: 'address-area',
  styles: [],
  template: `
    <form name='addressForm' novalidate>

  <label> Get The Report via Standard Mail:</label>
  <input name='needAddress' class='checkbox' type='checkbox' [(ngModel)]='address.need' />
  <div *ngIf='isNeeded()'>
    <input name='add1' class='text' type='text' placeholder='Address Line 1' [(ngModel)]='address.add1' />
    <input name='add2' class='text' type='text' placeholder='Address Line 2' [(ngModel)]='address.add2' />
    <input name='city' class='text' type='text' placeholder='City' [(ngModel)]='address.city' />
    <input name='state' class='text' type='text' placeholder='State' [(ngModel)]='address.state' />
    <input name='zip' class='text' type='text' placeholder='Zip' [(ngModel)]='address.zip' />
    <input name='country' class='text' type='text' placeholder='Country' [(ngModel)]='address.country' />
  </div>
</form>
  `
})
export class AddressComponent {
  address: Address = new Address(false);
  isNeeded = function(){
    this.address.need == true;
  }
}

and just for reference, here is the class object.

export class Address{
  need: boolean;
  add1: string;
  add2: string;
  city: string;
  state: string;
  zip: string;
  country: string;
  constructor(public n: boolean){
    this.need = n;
  }
}

Answer 1

isNeeded() needs to return a value for ngIf to evaluate.

export class AddressComponent {
  address: Address = new Address(false);
  isNeeded = function(){
    return this.address.need == true; // returns the value
  }
}

Also, if you just want to show/hide elements, use style binding instead of ngIf because ngIf removes the elements from the DOM if the passed expression evaluates to false which is not efficient if it happens many times. You use style binding to show/hide elements like so

<div [style.display]='isNeeded() ? "block" : "none"'>
    <input name='add1' class='text' type='text' placeholder='Address Line 1' [(ngModel)]='address.add1' />
    <input name='add2' class='text' type='text' placeholder='Address Line 2' [(ngModel)]='address.add2' />
    <input name='city' class='text' type='text' placeholder='City' [(ngModel)]='address.city' />
    <input name='state' class='text' type='text' placeholder='State' [(ngModel)]='address.state' />
    <input name='zip' class='text' type='text' placeholder='Zip' [(ngModel)]='address.zip' />
    <input name='country' class='text' type='text' placeholder='Country' [(ngModel)]='address.country' />
  </div>

Now, your div will still be in the DOM, angular justs toggle its style.display property everytime the expression changes value