title: Pass value between Grandchild component and Parent component
body: <p>Using Angular 8 I have a few components as follows:</p>
  
  <pre><code>Parent 1 &gt; Child 1 &gt; ... &gt; N Grandchild 1 
  
  Parent 2 &gt; Child 2 &gt; ... &gt; N Grandchild 2
  </code></pre>
  
  <p>Between <code>Child X</code> and <code>N Grandchild X</code> might have other components. So it can be more than 3 levels.</p>
  
  <p><strong>Objective</strong><br>
  1. Set a Value in <code>N Grandchild 1</code> and use it in <code>Parent 1</code>.<br>
  2. Set a Value in <code>N Grandchild 2</code> and use it in <code>Parent 2</code>.   </p>
  
  <p>I am considering a few options:</p>
  
  <ol>
  <li><p>Using an EventEmitter (<a href="https://stackblitz.com/edit/angular-qezmme" rel="nofollow noreferrer">StackBlitz example</a>)</p>
  
  <p><strong>Problem:</strong> Not working between Grandchild and Parent.</p>
  
  <p>It seems to work only one level up ... It is possible to make it work N levels up?   </p>
  
  <pre><code>export class GrandchildComponent implements OnInit {
  
    @Output() changeEvent = new EventEmitter&lt;string&gt;();
  
    ngOnInit() {
      this.changeEvent.emit('Hello');
    }
  
  } 
  </code></pre></li>
  <li><p>Using a Service</p>
  
  <p>In this case I inject the Service in <code>N Grandchild X</code> to set the value and in <code>Parent X</code> to read the value.</p>
  
  <p><strong>Problem</strong>:<br>
  How to be sure that <code>Parent 1</code> reads the value set by <code>N GrandChild 1</code> and <code>Parent 2</code> reads the value set by <code>N GrandChild 2</code>? Is this possible?</p></li>
  </ol>