title: Consolidating Two Directives into a Single One
body: <p>Suppose one has two predefined directives <code>dir1</code> and <code>dir2</code> ( which are provided by a 3rd party API that one has no control over). Let's say these can be applies to an html element as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div dir1="red" [dir2]="123"&gt;... My Content ...&lt;/div&gt;
  </code></pre>
  
  <p>I have found myself applying the above the directives with the exact same binding values in several places in my code. Rather than repeat myself, I would like to create my own custom directive, call it <code>myDir</code>, that I could apply like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div MyDir &gt;... My Content ...&lt;/div&gt;
  </code></pre>
  
  <p>This should be <em>exactly</em> the same as applying <code>dir1</code> and <code>dir2</code> as in the prior example above i.e. it will have the values <code>"red"</code> and <code>123</code> hard coded within it's class.</p>
  
  <p>I have tried setting host bindings as in the following <a href="https://plnkr.co/edit/W20Wvew326qsGfPU5H6v" rel="noreferrer">plunker</a> example, but this doesn't work..</p>
  
  <p>One idea I have is if only typescript had multiple inheritance, then I would simply write the <code>MyDir</code> class an extension of <code>Dir1</code> <em>and</em> <code>Dir2</code>..</p>
  
  <p>My question is how do I go about writing the custom directive (<code>MyDir</code>) to achieve the intended use? </p>
  
  <p>Kindly Assist,
  Thanks You!</p>
  
  <p><a href="https://plnkr.co/edit/W20Wvew326qsGfPU5H6v" rel="noreferrer">https://plnkr.co/edit/W20Wvew326qsGfPU5H6v</a></p>