title: how to correctly use dotdotdot for overflow text in angular 5?
body: <p>I would like to create a directive which apply ... when overflow.
  I have used dotdotdot jQuery plugin in the past but it doesn't really
  work in angular 5.</p>
  
  <p>What I have till now is creating a directive called DotdotdotDirective with the
  selector [appDotdotdot] as shown below:</p>
  
  <pre><code>import { Directive, ElementRef } from '@angular/core';
  
  declare var $: any;
  
  @Directive({
    selector: '[appDotdotdot]'
  })
  export class DotdotdotDirective {
  
    constructor(private el: ElementRef) { }
  
  }
  </code></pre>
  
  <p>The usage is simple:</p>
  
  <pre><code>&lt;h3&gt;&lt;a href="#" appDotdotdot&gt;{{data.trip.name}}&lt;/a&gt;&lt;/h3&gt;
  </code></pre>
  
  <p>I have also imported the jQuery plugin in case this can be used inside the
  directive. index.html :</p>
  
  <pre><code>&lt;script src="assets/js/jquery.dotdotdot.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm expecting that the code should be implemented in the constructor but I
  don't know how to use it in angular 5 ?
  Should I use the directive as a wrapper to the jQuery plugin or maybe
  angular has different solution for this requirement?
  Thanks in advance!</p>