title: Injecting forward ref of ancestor through children to grand-child
body: <h3>The Problem</h3>
  
  <p>Right now I am using some components to obfuscate some of the more complex functionality away from the implementing devs allowing them to write blocks of code more easily.</p>
  
  <p>The stack of components looks like this from the code side:</p>
  
  <pre><code>&lt;smart-nav-tile-group&gt;
      &lt;radio-checkbox-group&gt;
          &lt;smart-nav-tile&gt;
              &lt;radio-checkbox-wrapper&gt;
  </code></pre>
  
  <p>What I am trying to accomplish is to inject a forward reference of the <code>radio-checkbox-group</code> component into each of the <code>radio-checkbox-wrapper</code> components so that there is two-way communication between the two components.</p>
  
  <p>So in my <code>radio-checkbox-wrapper</code> I have the following in my <code>constructor</code> function:</p>
  
  <pre><code>@Inject(forwardRef(() =&gt; RadioCheckboxGroupComponent)) public inputGroup: RadioCheckboxGroupComponent
  </code></pre>
  
  <p>This works all well and fine as long as the <code>RadioCheckboxGroup</code> component is the direct parent of <code>RadioCheckboxWrapper</code>.  However with the <code>SmartNavTile</code> component in the middle, it throws the following error:</p>
  
  <pre><code>SmartNavTileComponent.html:2 ERROR Error: StaticInjectorError(AppModule)[RadioCheckboxWrapperComponent -&gt; RadioCheckboxGroupComponent]: 
    StaticInjectorError(Platform: core)[RadioCheckboxWrapperComponent -&gt; RadioCheckboxGroupComponent]: 
      NullInjectorError: No provider for RadioCheckboxGroupComponent!
  </code></pre>
  
  <h3>The Question</h3>
  
  <p>How can I create a forward reference to the <code>RadioCheckboxGroup</code> component in the <code>RadioCheckboxWrapper</code> component regardless of how far up the ancestor tree it has to go to find it?</p>