How to pass data between components in angular : <pre><code>&lt;div class="container-fluid fill"&gt;
&lt;app-navbar&gt;&lt;/app-navbar&gt;
&lt;div class="container fill"&gt;
  &lt;div class="row padding"&gt;
    &lt;div class="col-md-3 "&gt;
      &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 text-center"&gt;
     &lt;app-menu-section&gt;&lt;/app-menu-section&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3 "&gt;
     &lt;app-cart&gt;&lt;/app-cart&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>app-sidebar renders a category menu and when a category is Selected I want to pass the value to menu section component to render appropriate category</p>

<p>So how to pass the value between two components which are not parent child</p>
