title: Query dom element's properties Angular 4
body: <p>I am trying to create a directive that will make my layouts full height. To do so, i am using the code below: </p>
  
  <pre><code>import { HostListener, Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
  @Directive({ selector: '[fill-height]' })
  
  export class FillHeightDirective implements AfterViewInit {
  
  
      constructor(private el: ElementRef) {
      }
  
      ngAfterViewInit(): void {
          this.calculateAndSetElementHeight();
      }
  
      @HostListener('window:resize', ['$event'])
      onResize(event) {
          this.calculateAndSetElementHeight();
      }
  
      private calculateAndSetElementHeight() {
          this.el.nativeElement.style.overflow = 'auto';
          const windowHeight = window.innerHeight;
          const elementOffsetTop = this.getElementOffsetTop();
          const elementMarginBottom = this.el.nativeElement.style.marginBottom;
          const footerElementMargin = this.getfooterElementMargin();
  
          this.el.nativeElement.style.height = windowHeight - footerElementMargin - elementOffsetTop + 'px';
          console.log([windowHeight, elementOffsetTop, elementMarginBottom, footerElementMargin, this.el.nativeElement.style.height]);
      }
  
      private getElementOffsetTop() {
          return this.el.nativeElement.getBoundingClientRect().top;
      }
  
      private getfooterElementMargin() {
          const footerElement = document.getElementById('footer');
          const footerStyle = window.getComputedStyle(footerElement);
          return parseInt(footerStyle.height, 10);
      }
  }
  </code></pre>
  
  <p>This works fine but i want a way not to hard code the footer id. This directive will be used on elements that aren't related to the footer in any way so i can't use @ViewChild or @Input. I thought i would create another directive to get this information (element height)  and it looks like this: </p>
  
  <pre><code>@Directive({ selector: '[footer]' })
  
  export class NbFooterDirective implements AfterViewInit {
  
      constructor(private el: ElementRef) {
      }
  
      ngAfterViewInit(): void {
          this.getElementHeight();
      }
  
      @HostListener('window:resize', ['$event'])
      onResize(event) {
          this.getElementHeight();
      }
  
      private getElementHeight() {
          return this.el.nativeElement.style.height;
      }
  }
  </code></pre>
  
  <p>Now i want a way to pass this height data from this directive to the first directive that does the computations. </p>