title: How to set computed width on the host element using a directive in Angular 2
body: <p>I have a directive called as <code>resize</code> which handles some mouse events and computes <code>width</code> on mouse move and it emits the width from the directive. </p>
  
  <p>I am using this directive on a <code>div</code> inside a component say <code>small</code>. The component <code>small</code> has a parent where it is being used. The <code>small</code> component has a <code>width</code> set to <code>200px</code>. Now, I would like to set the width which is being computed in the directive on the host element of the <code>small</code> component. </p>
  
  <p>Here is the code:</p>
  
  <p>small.component.html:</p>
  
  <pre><code>&lt;div class="root"&gt;
   &lt;div&gt;... some elements&lt;/div&gt;
   &lt;div class="sizer" resize&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>small.component.ts:</p>
  
  <pre><code>import { Component, OnChanges, OnInit, EventEmitter, Input, Output } from "@angular/core";
  @Component({
      selector: "comp-small",
      providers: [SmallService],
      templateUrl: "./small.component.html",
  })
  export class Small implements OnInit {
    constructor() {
    }
    // some functionality
  
  }
  </code></pre>
  
  <p>small.scss:</p>
  
  <pre><code>comp-small {
   width: 200px;
  }
  </code></pre>
  
  <p>parent.component.html:</p>
  
  <pre><code>&lt;comp-small&gt;&lt;/comp-small&gt;
  &lt;div class="blah"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>directive resize:</p>
  
  <pre><code>import { Directive, Output, EventEmitter, ElementRef, HostListener, Input } from "@angular/core";
  
  @Directive({
      selector: "[resize]"
  })
  export class Resize {
      private stPoint: number;
      private endPoint: number;
      private root: HTMLElement;
      private width: number;
  
      @Output() resizer = new EventEmitter();
  
      constructor(private _el: ElementRef) {
          this.root = this._el.nativeElement;
          console.log("Root Element", this.root);
      }
  
      @HostListener('mousedown', ['$event'])
      private _onMouseDown(event) {
         this.stPoint = event.pageX;
         console.log("Starting pt", this.stPoint);
      }
  
      @HostListener('mousemove', ['$event'])
      private _onMouseMove(event) {
          if (this.stPoint) {
              if (event.type === "mousemove") {
                  this._endPoint = event.pageX;
                  console.log("end pt: mousemove", this.endPoint);
              } 
              this.width = this.endPoint - this.stPoint;
              console.log("This Width", this.width);
              this.resizer.emit(this.width);
          }
      }
  
      @HostListener('mouseup', ['$event'])
      private _onMouseUp(event) {
          console.log("Width", this.width);
      }
  }
  </code></pre>
  
  <p>How can I set the width of the <code>comp-small</code> with the computed width from the directive. Any help would be greatly appreciated.</p>
  
  <p>Thank you.</p>