title: Apply method on directive instance
body: <p>in Angular 6 I got a multiple elements that use a drag-scroll directive. </p>
  
  <p>Everything works fine but I want to add buttons that will scroll given instance not all of them :)</p>
  
  <p>How to address moveLeft() and  moveRight() fn to the specific directive instance? I was trying to use @ViewChildren but this access all of the instances in forEach. </p>
  
  <p>The number of the rows that will use scroll will be dynamic so I did not wanted to give them any id's.</p>
  
  <pre><code>  &lt;!-- FIRST ROW --&gt;
           &lt;div class="dragscroll" dragScroll scrollbar-hidden="true" 
   drag-scroll-y-disabled="true"&gt;
               &lt;div&gt;
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
               &lt;/div&gt;
               &lt;div&gt;
                  &lt;button class="prev-exercise"(click)="moveLeft($event)"&gt;Prev&lt;/button&gt;
                   &lt;button class="next-exercise" (click)="moveRight($event)"&gt;Next&lt;/button&gt;
               &lt;/div&gt;
           &lt;/div&gt;
  
    &lt;!-- Second ROW --&gt;
           &lt;div class="dragscroll" dragScroll scrollbar-hidden="true" drag-scroll-y-disabled="true"&gt;
               &lt;div&gt;
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
               &lt;/div&gt;
               &lt;div&gt;
                  &lt;button class="prev-exercise"(click)="moveLeft($event)"&gt;Prev&lt;/button&gt;
                   &lt;button class="next-exercise" (click)="moveRight($event)"&gt;Next&lt;/button&gt;
               &lt;/div&gt;
           &lt;/div&gt;
  
    &lt;!-- Third ROW --&gt;
           &lt;div class="dragscroll" dragScroll scrollbar-hidden="true" drag-scroll-y-disabled="true"&gt;
               &lt;div&gt;
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                 &lt;img src="/freeze_frame_image_692.png"&gt; 
                  &lt;img src="/freeze_frame_image_692.png"&gt; 
               &lt;/div&gt;
               &lt;div&gt;
                  &lt;button class="prev-exercise"(click)="moveLeft($event)"&gt;Prev&lt;/button&gt;
                  &lt;button class="next-exercise" (click)="moveRight($event)"&gt;Next&lt;/button&gt;
               &lt;/div&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>And here we got ts file</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit, ViewChildren, Input, QueryList } from '@angular/core';
  import { DragScrollModule, DragScrollDirective } from 'ngx-drag-scroll';
  @Component({
    selector: 'program-list',
    templateUrl: './program-list.component.html',
    styleUrls: ['./program-list.component.scss']
  })
  
  export class ProgramListComponent implements AfterViewInit {
  
    programs: any;
  
  
    @ViewChildren(DragScrollDirective) ds: QueryList&lt;DragScrollDirective&gt;;
  
    constructor() {
    }
  
    ngAfterViewInit() {
      this.ds.forEach((dragel) =&gt; {
      dragel.scrollbarHidden = true;
      });
    }
    moveLeft(event) {
      this.ds.forEach((dragel) =&gt; {
        dragel.moveLeft();
      });
    }
  
    moveRight() {
      this.ds.forEach((dragel) =&gt; {
      dragel.moveRight();
      });
    }
  
  }
  </code></pre>