title: Angular 4 call directive method from component
body: <p>i'm trying to build a structural directive that will change the parent DOM structure either invoked by using its selector (static) or by calling its public method(dynamic).</p>
  
  <ul>
  <li><p>Using the directive selector in a html template works fine without
  any issues.</p></li>
  <li><p>I'm trying to figure out if we an achieve the same without using it in template and by calling the directive method.</p></li>
  </ul>
  
  <p><strong>my-directive.ts</strong></p>
  
  <pre><code>@Directive({ selector: '[sampleDirective]' })
  
  export class SampleDirective {
      ...
     constructor(..) {
          this.customDirective();
       }
    }
  customDirective() {
      console.log('Inside customDirective()');
  }
  </code></pre>
  
  <p><strong>my-component.ts</strong></p>
  
  <pre><code>import { SampleDirective } from './my.directive';
  ...
  @Component({
   selector: 'my-component',
   template: `&lt;button (click)="click()"&gt; Click Me &lt;/button&gt;`
  })
  constructor() { }
  ..
  click() {
    // call directive method here
  }
  </code></pre>
  
  <p>I need this because i'm creating a generic solution to change the DOM structure of a component at runtime with help of a directive.</p>
  
  <p>** <em>please ignore if there are any typo. sorry that i couldn't paste the complete code here</em></p>