title: Angular 6 Nested Directives
body: <p>I am trying to nest directives in my angular 6 application (the typescript version of angular). In other words: from within directive <em>A</em> I would like to apply 2 other directives <em>B</em> and <em>C</em>.</p>
  
  <p>Directives have no templates so I'm not sure if this is possible or not. Also, inheritance is not sufficient since I would have to inherit from multiple directives.</p>
  
  <p>Is this possible or do I have to bite the bullet and have duplicate code?</p>
  
  <hr>
  
  <p>If you are wondering why I would like to do this read on:</p>
  
  <p>I have directives for <strong>right click</strong> events such as mouse down, mouse up. The input to these directives is a function that gets called on these events.</p>
  
  <p>I want to create a right click drag directive such that the inputs are functions to handle the following right-click events: on mouse down, on mouse up, and optionally on drag. </p>
  
  <p>I know how to do this building the directive from scratch but it would be cleaner if I could simply use the existing directives for right click mouse down etc. </p>
  
  <p>I could then create more complicated drag directives that handle dom manipulation by leveraging the already existing right-drag directive.</p>