title: Passing on all directives to a child element of the component
body: <p>I have a few custom directives which are basically designed for <code>&lt;input&gt;</code>.
  And I have a custom component <code>&lt;app-decorated-input&gt;</code></p>
  
  <p>There are a ton <code>&lt;app-decorated-input&gt;</code>s along with simple <code>&lt;input&gt;</code>s in my application for some of which I like to use the directives and for others I don't. How do I pass on the directives to the underlying <code>&lt;input&gt;</code> when the directive is used like so:</p>
  
  <pre><code>&lt;app-decorated-input directive1 directive2 &gt;&lt;/app-decorated-input&gt;
  </code></pre>
  
  <p>and have the same effect of the directives on the underlying <code>&lt;input&gt;</code> as if it were used directly on it:</p>
  
  <pre><code> &lt;input type="text" directive1 directive2 &gt;
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>What lies inside <code>&lt;app-decorated-input&gt;</code> is not much of relevance except the fact that it contains an <code>&lt;input&gt;</code> as I have already mentioned. Its template looks something similar to:</p>
  
  <pre><code>&lt;div&gt; Some decorations here &lt;/div&gt;
  &lt;div&gt; 
    &lt;input type="text" {...directives}&gt; &lt;!-- In ReactJS this is done by using {...this.props} --&gt;
  &lt;/div&gt;
  &lt;div&gt; Some decorations here too! &lt;/div&gt;
  </code></pre>
  
  <p>All I want to do is transfer all the directives specified on the <code>&lt;app-decorated-input&gt;</code> to the underlying <code>&lt;input&gt;</code>.</p>