title: How to capture a value 3 components deep in Angular
body: <p>I have three components in my angular application, A, B and C.
  A is the main component, B is a smaller section that is nested inside A and C is a modal dialog.</p>
  
  <p>The template code for component A looks something like this...</p>
  
  <pre><code>&lt;main&gt;
     &lt;h1&gt;Component body title&lt;/h1&gt;
     &lt;app-component-b&gt;&lt;/app-component-b&gt;
     &lt;button (click)="openModal()"&gt;Open&lt;/button&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Component A ts file</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatDialog } from '@angular/material';
  import { ComponentC } from '../component-c/component-c.component';
  
  @Component({
    selector: 'app-component-a'
  })
  
  export class ComponentA {
    public data;
    public form-data;
  
    constructor (private dialog: MatDialog) {}
  
    public openModal() {
       const dialogRef = this.dialog.open(ComponentC, {
          height: '100%',
          data: this.data
       });
  
       dialogRef.afterClosed().subscribe(result =&gt; {
          this.form-data = result;
       });
    }
  }
  </code></pre>
  
  <p>From component A, you can open the modal dialog i.e Component C. Inside the modal dialog, there is a form that you fill in and when you submit, the <code>form.value</code> gets passed into the MatDialog's <code>close()</code> method, which returns an observable that I am subscribing to in component A - <code>dialogRef.afterClosed().subscribe(...)</code></p>
  
  <p>Here is the part that trips me up. I need to be able to call a method inside component B (the one nested in component A), once the modal dialog is closed and the data from the modal has been received in component A. I need to pass that form-data into a method in Component B. The problem is that when the page loads initially, form-data is undefined. I figure I could do this via a combination of @Output decorator and some custom event binding but I can't quite figure it out.</p>
  
  <p>How do I make is so that, when the modal dialog is closed and the data is passed back to component A, the nested component B can call a method and pass that data in?</p>