title: Angular 2 advanced transclusion
body: <p>I have this html code that's working properly:</p>
  
  <pre><code>&lt;div class="form-group"
       [ngClass]="{'has-error': !control.valid &amp;&amp; control.dirty, 'has-success': control.valid &amp;&amp; control.dirty}"&gt;
      &lt;label class="col-sm-3 control-label"&gt;User:&lt;/label&gt;
      &lt;div class="col-sm-9"&gt;
          &lt;input class="form-control" type="email" id="email"
                 minlength="5"
                 ngControl="email" #control="ngForm"&gt;
          &lt;span class="help-block" *ngIf="!control.valid &amp;&amp; control.dirty"&gt;
              este campo debe ser mayor que 5
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to create a component like this:</p>
  
  <pre><code>&lt;control-validation&gt;
      &lt;label&gt;User:&lt;/label&gt;
      &lt;input class="form-control" type="email" id="email"
                     minlength="5"
                     ngControl="email" #control="ngForm"&gt;
      &lt;error-messages&gt;
              &lt;span class="help-block" *ngIf="!control.valid &amp;&amp; control.dirty"&gt;
                  este campo debe ser mayor que 5
              &lt;/span&gt;
      &lt;/error-messages&gt;
  &lt;/control-validation&gt;
  </code></pre>
  
  <p>I have a problem with ngClass, the parent directive should know what's the  input reference name. How can I select the input and get the reference name "#control" and use it in the parent component in order to ngClass works properly?</p>
  
  <p>I accept any other solutions to create a component that encapsulates any input validation according to this css.</p>