title: How to change the values of Boolean in between two components in angular 4
body: <p>I am trying to hide some Content in in the UI using *ngif of angular4 its not working properly. can anybody help me on this. its value is not changing in the other component.</p>
  
  <p>Navbar Template:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbarTogglerDemo02"&gt;
    &lt;ul class="navbar-nav ml-auto mt-2 mt-md-0"&gt;
      &lt;li class="nav-item active"&gt;
        &lt;a class="nav-link" href="#"&gt;Dashboard&lt;/a&gt;
      &lt;/li&gt;
      &lt;div *ngIf="saveSpinner==true" class="dropdown notificatio-dropdown"&gt;
        &lt;li&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false"&gt;&lt;span class="noti-icon ml-2"&gt;&lt;/span&gt;Sample Data&lt;/a&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Navbar Component: Here saveSpinner is set to false.</p>
  
  <pre><code>    import {Component} from '@angular/core';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  
  })
  export class NavbarComponent implements OnInit {
     saveSpinner= false
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>Dashboard template:</p>
  
  <pre><code>&lt;app-navabar&gt;&lt;/app-navabar&gt;
  </code></pre>
  
  <p>Dashboard Component: Here i am trying to change the value of saveSpinner to true. Its Not Changing. Here is the Code.</p>
  
  <pre><code>   import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent implements OnInit {
    saveSpinner=true;
    constructor() { }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>Can anybody help me how to change the value of saveSpinner in the DashboardComponent.</p>