title: Angular2 trigger directive from component on click
body: <p>I have a directive that adds box shadow to any hovered element on page but I need it to start applying the shadow after a click of a button. The problem I have, is it only applies to a single element.</p>
  
  <p><a href="https://i.stack.imgur.com/dxV1g.png" rel="nofollow noreferrer">Here is an image of the box shadow</a></p>
  
  <p>It applies only to the header after I hover it. I need it to apply to any hovered element.</p>
  
  <p>My app.component:</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
      &lt;h1 myHighlight="orange"&gt;{{title}} {{clickedElement | async}}&lt;/h1&gt;
      &lt;nav&gt;
        &lt;a routerLink="/dashboard" routerLinkActive="active"&gt;Dashboard&lt;/a&gt;
        &lt;a routerLink="/heroes" routerLinkActive="active"&gt;Heroes&lt;/a&gt;
        &lt;a routerLink="/secret-heroes" *ngIf="authService.loggedIn()" routerLinkActive="active"&gt;Secret Heroes&lt;/a&gt;
        &lt;a (click)=authService.login() *ngIf="!authService.loggedIn()"&gt;Log In&lt;/a&gt;
        &lt;a (click)=authService.logout() *ngIf="authService.loggedIn()"&gt;Log Out&lt;/a&gt;
        &lt;a (click)=giveFeedback()&gt;Give Feedback&lt;/a&gt;
        &lt;a (click)="listening = !listening" &gt;Give Feedback2&lt;/a&gt;
  
        &lt;button id="modalButton" type="button" (click)="feedbackModal.show()"&gt;test&lt;/button&gt;
        &lt;my-feedback-modal&gt;
        &lt;/my-feedback-modal&gt;
  
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    styleUrls: ['app.component.css']
  })
  export class AppComponent {
    //@Input() highlight: boolean = false;
    title = 'Tour of Heroes';
  
    @ViewChild(ModalComponent) modal: ModalComponent;
    @ViewChild(HighlightDirective) highlightDir: HighlightDirective;
  
    @ViewChild(FeedbackModalComponent) feedbackModal: FeedbackModalComponent;
  
    constructor(private authService: AuthService, private el: ElementRef, private cdr: ChangeDetectorRef) {
      this.cdr = cdr;
    }
  
    clickedElement:BehaviorSubject&lt;ElementRef&gt; = new BehaviorSubject(this.el);
  
    ngAfterViewInit() {
      //this.clickedElement.next(this.highlightDir.getElement().nativeElement.nodeName);
    }
  
    ngDoCheck() {
  
    }
  
    giveFeedback(): void {
  
          this.highlightDir.startFeedback();
          this.cdr.detectChanges();
          //this.highlight = true;
    }
  }
  </code></pre>
  
  <p>My highlight.directive:</p>
  
  <pre><code>@Directive({
    selector: 'a, abbr, address, article, body, br, button, div, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, ' +
    'input, label, li, link, meta, nav, object, ol, option, output, p, param, pre, section, select, small, source, span,' +
    'summary, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, u, ul, video'
  })
  export class HighlightDirective {
      elementsArray: string[];
      listening: boolean = false;
  
      constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {
          this.cdr = cdr;
          this.elementsArray = ["a", 'abbr', 'address', 'article', 'body', 'br', 'button', 'div', 'h1', 'h2', 'h3', 'h4', 'h5'
          , 'h6', 'header', 'hr', 'i', 'iframe', 'img', 'input', 'label', 'li', 'link', 'meta', 'nav', 'object', 'ol', 'option'
          , 'output', 'p', 'param', 'pre', 'section', 'select', 'small', 'source', 'span', 'summary', 'table', 'tbody', 'td'
          , 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'u', 'ul', 'video'];
      }
  
      //@Input() defaultColor: string;
      //@Input() listening: boolean = false;
      //check: boolean = false;
  
      public getElement(): ElementRef {
          return this.el;
      }
  
      public startFeedback(): boolean {
          this.listening = true;
          this.cdr.detectChanges();
  
          return true;
      }
  
      @HostListener('click') onClick() {
          if(this.listening) {
  
              document.getElementById('modalButton').click();
  
              this.listening = false;
          }
      }
  
      @HostListener('mouseenter') onMouseEnter() {
          if(this.listening) {
  
              this.el.nativeElement.style.boxShadow = '0 0 0 5px yellow';
              this.el.nativeElement.parentNode.style.boxShadow = null;
          }
      }
  
      @HostListener('mouseleave') onMouseLeave() {
          if(this.listening) {
  
              this.el.nativeElement.style.boxShadow = null;
              this.el.nativeElement.parentNode.style.boxShadow = '0 0 0 5px yellow';
  
              let check = false;
  
              for (let entry of this.elementsArray) {
                  if (this.el.nativeElement.parentNode.nodeName == entry.toUpperCase()) {
                      check = true;
                      break;
                  }
              }
  
            if (!check)
              this.el.nativeElement.parentNode.style.boxShadow = null;
          }
      }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>