title: Get parent component's elementRef from child component
body: <p>I have <code>ParentComponent</code> and <code>ChildComponent</code>. Parent component uses <code>ng-content</code> so it can have anything within and in any kind of DOM element hierarchy.</p>
  
  <p>My child component has a specific requirement:</p>
  
  <blockquote>
    <ol>
    <li>When <em>child</em> is clicked it toggles the display of its details</li>
    <li>When <em>child</em> is placed inside <code>ParentComponent</code>, then when the <em>parent</em> is clicked, <em>child</em> should do the same as in 1.</li>
    </ol>
  </blockquote>
  
  <p>Since parent can have any content it seems unreasonable to add <code>@ContentChild</code> to the parent, because ... well encapsulation.</p>
  
  <p>So the only place where this should handled is <code>ChildComponent</code>. Getting to <code>ParentComponent</code> is pretty easy by:</p>
  
  <pre><code>// ChildComponent ctor
  constructor(@Optional() parent: ParentComponent) { ... }
  </code></pre>
  
  <p>but this doesn't help as I need parent component's <code>ElementRef</code> so that I would be able to attach a click event handler to it.</p>
  
  <p><strong>How can I obtain it the Angular way?</strong> <sup><strong>†</strong></sup></p>
  
  <blockquote>
    <p><sup><strong>†</strong></sup> <em>I know I could get <code>ChildComponent</code>'s <code>ElementRef</code> and traverse the DOM upwards looking for the closest <code>ParentComponent</code>'s element, but that's likely more of a hack than the proper Angular way of doing this. I'm pretty sure there must be some better way.</em></p>
  </blockquote>