How to get width of (DOM) Element in Angular2
<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>