Access the Next Div Inside Host Binding Angular2

Question

I want to access the next div on which the directive is placed.

My Directive

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector:'[tDropdown]'
})

export class DropdownDirective{

  @HostBinding('class.hidden') get opened(){
      return this.isOpen;
  }

  @HostListener('click') open(){
      this.isOpen = false ;
  }

  @HostListener('mouseleave') close(){
    this.isOpen = true;
  }

  private isOpen = true;

}

<div class="well box" tDropdown>
          <span>Group :-</span>{{entry.key}}
            <div> // access this div from the directive
              <table class="table">
                  <thead class="thead-inverse">
                  <tr>

How to access the subsequent div from the element on which directive is placed ?

Answer 1

  class DropdownDirective {

    constructor(private elRef:ElementRef) {}

    ngAfterContentInit() {
      var div = this.elRef.nativeElement.querySelector('div')
      div.classList.add('hidden');
    }

If you want to do it on the parent component

@ViewChild(DropdownDirective, {read: ElementRef}) elRef:ElementRef;

click() {
  var div = this.elRef.nativeElement.querySelector('div')
  div.classList.add('hidden');
}