title: parent-component-binding with *ngIf on a shared service is not updated when triggered from child component
body: <p>I have a <strong>parent</strong> and <strong>child</strong> component. The <strong>parent</strong> component has a menu. When the <strong>child</strong> component says this.service.isMenuVisible(false) the menu is still visible in the parent component. I get no error.</p>
  
  <p>Afair angular checks for updates from <strong>parent</strong> down to the <strong>children</strong> components, that means I try to change an expression after the parent component was checked...</p>
  
  <p>How should I correctly fix that scenario with my shared singleton service?</p>
  
  <pre><code>export class RouterService {
    public id: number = 0;
    constructor(private router: Router,private route: ActivatedRoute) {
  
      this.router.events.subscribe(event =&gt; {
        if (event instanceof RoutesRecognized) {
  
          if (event.url == "/projects/create") {
            console.log(event.url)
           this.setIsMenuVisible(false);
          }
          else {
            console.log(event.url);
            this.setIsMenuVisible(true);
          }
  
          var first = event.state.root.firstChild.firstChild;
          var id = first &amp;&amp; event.state.root.firstChild.firstChild.params['id'];
          this.id = +id;
        }
      });
    }
  
    private isMenuVisible: BehaviorSubject&lt;Boolean&gt; = new BehaviorSubject(false);
  
    setIsMenuVisible(isMenuVisible: Boolean): void
    {
      this.isMenuVisible.next(isMenuVisible);
    }  
  
    getIsMenuVisible(): Observable&lt;Boolean&gt; {
      return this.isMenuVisible.asObservable();
    }
  
  }
  </code></pre>
  
  <p><strong>PARENT Component</strong></p>
  
  <pre><code>    ngOnInit()
      {
     this.service.id === 0 ? this.service.setIsMenuVisible(false) : this.service.setIsMenuVisible(true);
  
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="navbar-nav ml-auto mx-4" *ngIf="service.getIsMenuVisible"&gt;
  ...
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CHILD Component</strong></p>
  
  <pre><code>ngOnInit()
  {
      this.service.setIsMenuVisible(false);
  }
  </code></pre>