Angular 2 hide and show element using *ngIf with boolean
<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>