title: How to get width of (DOM) Element in Angular2
body: <p>there a some similiar threads but I couldn't find a suitable answer
  for my needs. So that direct DOM access should be strictly avoided
  in angular2 I'm just wondering whats best practice for this.</p>
  
  <p>What I wan't to achieve is a resize of a  element based on the current width.</p>
  
  <p><strong>workitemresize.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, HostListener, Renderer, Input } from '@angular/core';
  
  @Directive({
    selector: '[workItemResize]'
  })
  
  export class WorkItemResizeDirective implements ngAfterViewInit {
  
    private el: HTMLElement;
    private renderer: Renderer;
  
    constructor(el: ElementRef, public renderer: Renderer)
    { 
      this.el = el.nativeElement; 
      this.renderer = renderer;
    }  
  
  
    @HostListener('window:resize', ['$event.target']) 
    onResize() 
    { 
      this.resizeWorks();
    }
  
    ngAfterViewInit() {
      this.resizeWorks();
    }
  
    private resizeWorks(): void {
      this.renderer.setElementStyle(this.el, 'height', this.el.width); // &lt;-- doesn't work I kow that this.el.width doesn't exist but just for demonstration purpose
      this.renderer.setElementStyle(this.el, 'height', '500'); // &lt;-- works
    }
  
  }
  </code></pre>
  
  <p><strong>projects.template.html</strong></p>
  
  <pre><code>&lt;div class="posts row"&gt;
          &lt;div class="work-item col-xs-12 col-sm-6 col-no-padding"  workItemResize *ngFor="let post of posts"&gt;
  
                  &lt;!-- show some fancy image --&gt;
                  &lt;div class="img"  [ngStyle]="{'background-image':'url('+post.better_featured_image.source_url+')'}"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Related:
  <a href="https://github.com/angular/angular/issues/6515" rel="noreferrer">https://github.com/angular/angular/issues/6515</a></p>