title: Angular - How can I toggle the visibility of an element in a component from another component?
body: <p>I have the following scenario in my Angular app:</p>
  
  <p>A component <code>MainDashboardComponent</code> that is visible when I have the route <code>/</code>. Obviously I have the <code>&lt;router-outlet&gt;</code> tag in my <code>app.component.html</code> file, which looks like this:</p>
  
  <pre><code>&lt;app-side-menu&gt;&lt;/app-side-menu&gt;
  &lt;div class="main-container"&gt;
    &lt;div class="content"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I have a <code>SideMenuComponent</code> I use to have a side menu on all my routes. In <code>MainDashboardComponent</code> I have a method that for some reason needs to toggle a chat element that is situated on the side menu.
  Inside the <code>SideMenuComponent</code> I have a method that handles the visibility toggle for the chat element and it works as expected. How can I call this method from my <code>MainDashboardComponent</code> and toggle the chat element from there?</p>
  
  <p><strong>What I tried with no success</strong></p>
  
  <p>I tried to inject the <code>SideMenuComponent</code> inside my <code>MainDashboardComponent</code> but, though the method <code>toggleChat()</code> is called, the element doesn't change it's visibility. Looks like I have a kind of multiple instance of the same component I guess...</p>
  
  <p>Can you please help me with this? Thank you!</p>
  
  <p><strong>MainDashboardComponent</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-main-dashboard',
    templateUrl: './main-dashboard.component.html',
    styleUrls: ['./main-dashboard.component.scss']
  })
  export class MainDashboardComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {}
  
    setFocus(id) {
      // here I'd like to call SideMenuComponent togglechat() ... 
    }
  }
  </code></pre>
  
  <p><strong>SideMenuComponent</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.scss']
  })
  export class SideMenuComponent implements OnInit {
  
    showChat: boolean;
  
    constructor() {
      this.showChat = false;
    }
  
    ngOnInit() {
    }
  
    toggleChat() {
      this.showChat = !this.showChat;
    }
  
  }
  </code></pre>