title: Angular 2: Get reference to component property from attribute directive
body: <p>So, I am writing a bunch of filter components for a grid (Ag-Grid). I am going to display these filters in multiple locations, so I am writing a wrapper for them in order to access their value from different locations. Currently I'm implementing a filter drawer that will display the filters and am using an attribute directive <code>app-drawer-item</code> to get a reference to them:</p>
  
  <pre><code>&lt;app-filter-drawer #drawer [gridRef]="agGrid"&gt;
  
    &lt;app-text-filter app-drawer-item forColumn="AlertSid"&gt;&lt;/app-text-filter&gt;
  
    &lt;app-date-filter app-drawer-item forColumn="Name"&gt;&lt;/app-text-filter&gt;
  
  &lt;/app-filter-drawer&gt;
  </code></pre>
  
  <p>As you can see, there will be a number of filters, so it wouldn't be prudent to hard code them into <code>app-filter-drawer</code>. I am using <code>@ContentChildren</code> from <code>app-filter-drawer</code> to get a reference to the directives on each of them.</p>
  
  <p>Is it possible to get a reference to a property of a filter component (like <code>app-text-filter</code>) from the <code>app-drawer-item</code> directive? I have been messing around with <code>ElementRef</code> and <code>ViewContainer</code> but I don't see a way to reference the component instance directly. I am able to get it via event binding to the host, but I only need to access the values when the user clicks an 'Apply' button and it seems wasteful to emit an event each time the value is updated. There are also other methods in the component that I'll eventually need to invoke from the directive.</p>
  
  <p>I can provide more info if needed. Thanks!</p>