title: Angular2-text-ticker-directive not working in ionic 2 project
body: <p>I am trying to implement the Angular2-text-ticker-directiv from <a href="https://github.com/NateMay/Angular2-text-ticker-directive" rel="nofollow noreferrer">here</a>, but it not works. I got the div, and the div is empty, no scrolling text.</p>
  
  <p>For test I added the example code to my project for test.</p>
  
  <pre><code>&lt;ion-avatar item-left&gt;
      &lt;span class="story-username"&gt;{{getUsername()}}&lt;/span&gt;
      &lt;ion-icon name="icon-mapporia-edit" role="img" class="icon icon-ios ion-ios-icon-mapporia-edit story-edit" aria-label="icon mapporia-edit" ng-reflect-name="icon-mapporia-edit"&gt;&lt;/ion-icon&gt;
      &lt;p class="story-location"&gt;{{story.location}}&lt;/p&gt;
      &lt;div class="tickerContainer myStyles"&gt;
          &lt;div ticker [trigger]="'auto'" [text]="'A statically-typed, long string'" [speed]="50" [padding-right]="40" [size]="20"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="story-time"&gt;{{calculatePostedTime()}}&lt;/p&gt;
      &lt;rating [(ngModel)]="story.ratingAvarege" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false"&gt;&lt;/rating&gt;
      &lt;p class="story-subject"&gt;{{story.subject}}&lt;/p&gt;
  &lt;/ion-avatar&gt;
  &lt;li class="thumnail-list" *ngFor="let image of story.images"&gt;
      &lt;img-loader [src]="image" [spinner]="true" class="thumnails" alt="Story Image" id="story-image"&gt;
      &lt;/img-loader&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I added the <code>&lt;div id="ghost"&gt;&lt;/div&gt;</code> before calling my custom directive (shown up):</p>
  
  <pre><code>&lt;div class="profileDetails"&gt;
      &lt;story-summary *ngFor="let story of myStories" [story]="story" (click)="readStory(story)" class="story"&gt;&lt;/story-summary&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>I also included the given css: </p>
  
  <pre><code>.tickerContainer {
          overflow-x: hidden;
          overflow-y: scroll;
          white-space: nowrap;
      }
  
      #ghost {
          display: inline-block;
          height: 0;
          position: absolute;
      }
  
      .myStyles {
          background: #eee;
          color: blue;
          border: 1px solid #ddd;
          max-width: 200px;
          cursor: pointer;
      }
  </code></pre>
  
  <p>If anyone with experience to help me solve this problem. 
  thnx</p>
  
  <p>I found a bug.
  Please correct the following method as given:</p>
  
  <pre><code>getTextWidth(): number {
          let t = this.r.createElement( document.getElementById('ghost'), 'div' );
  
          // this.r.setText( t, this.text ); // not working, oddly
          t.innerHTML = this.text; // quick fix
  
          this.r.setElementStyle( t, 'font-size', this.size + 'px');
          let w = t.offsetWidth;
          t.innerHTML = '';
          return w;
      }
  </code></pre>