title: Angular 2 hide and show element using *ngIf with boolean
body: <p>I want to show and hide an element by using a button that's located in another component.</p>
  
  <p>So I have a Dashboard with an amount of chambers in it and a header.</p>
  
  <p>HTML of DashboardComponent with app-header and app-chamber: </p>
  
  <pre><code> &lt;app-header&gt;&lt;/app-header&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;app-chamber [kamers]="kamers"&gt;&lt;/app-chamber&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have this HTML wth the *ngIf in my ChamberComponent: </p>
  
  <pre><code>&lt;div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index"&gt;
        &lt;md-card class="chamber wit" *ngIf="kamer.patient == null"&gt;
           &lt;p *ngIf="showId"&gt;{{kamer.id}}&lt;/p&gt;
        &lt;/md-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the HeaderComponent I have a button that needs to show and hide the element :</p>
  
  <pre><code>@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    @Input() aList;
  
    dashboardComponent:DashboardComponent;
  
    chamberComponent:ChamberComponent;
  
    constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
      this.dashboardComponent = dashboardComponent;
      this.chamberComponent = chamberComponent;
  
    }
  
    ngOnInit() {
  
    }
  
  // THIS GETS CALLED BY A BUTTON CLICK
    toggleId(){
      this.chamberComponent.toggleId();
    }
  
  }
  </code></pre>
  
  <p>then my ChamberComponent code:</p>
  
  <pre><code>@Component({
    selector: 'app-chamber',
    templateUrl: './chamber.component.html',
    styleUrls: ['./chamber.component.css']
  })
        export class ChamberComponent implements OnInit {
  
        @Input() kamers;
        showId:boolean;
  
        constructor() {
          this.showId=false;
        }
  
        ngOnInit() {
  
        }
  
        toggleId = () =&gt; {
            this.showId = !this.showId;
        }
  
      }
  </code></pre>
  
  <p>So when I click the button, the value changes (I've logged this in the console) but the view isn't updated.. </p>
  
  <p>When I put a button in my ChamberComponent that calls the toggleId() function the view does reveice an update and the element is shown or hidden.</p>
  
  <p>But I need to toggle it from a button on my header.</p>