title: child parent communication best practices in Angular
body: <p>I'm trying to become better at Angular and I want to know the best practices between child-parent communication. My current app I want to work on is on Angular 6. I know I can  communicate between child-parent components using @ViewChild, @Output or creating a service. Is there another way to do the communication? if not which one of those 3 is better and why?</p>
  
  <p>Here's a simple example:</p>
  
  <p><strong>Child HTML</strong></p>
  
  <pre><code>&lt;button (click)="onLinkedClicked();"&gt;Click me&lt;/button&gt;
  </code></pre>
  
  <p><strong>Child TS</strong></p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  .
  .
  .
  export class showcaseMenuComponent implements OnInit {
      @Output() public linkedClicked = new EventEmitter&lt;String&gt;();
  
      constructor() {}
  
      onLinkedClicked() {
          console.log('on click child');
          this.linkedClicked.emit('collapsed');
      }
  }
  </code></pre>
  
  <p><strong>Parent HTML</strong></p>
  
  <pre><code>&lt;showcase-menu #topNavMenu 
                 [showBranding]="false"
                 [showSearch]= "false"  
                 (linkedClicked)="linkToggler($event)"&gt;. 
  &lt;/showcase-menu&gt;
  </code></pre>
  
  <p><strong>Parent TS</strong></p>
  
  <pre><code>.
  .
  .
   navMenuState: string;
  .
  .
  .
    linkToggler($event) {
      console.log("partent");
      this.navMenuState = $event;
    }
  </code></pre>