typescript - detect if the div is overflow with text

Question

Is there a way in Angular2/Typescript to detect if the div is overflow with text depending on the width of the screen. If the text is overflow, I want to display a "More" button. There's also a bookmark icon on the right side, so I have to take that into account of the div width.

In my HTML:

<div *ngFor="let i of items"> {{ i }} 
  <i class="fa fa-bookmark" aria-hidden="true"></i>
</div>

//If the text is overflow
<button *ngIf="overflow"> More </button>

In my typescript:

@HostListener('window', ['$event'])
public checkOverflow() {
    console.log(event.target.innerWidth)
}

The question is how to find out what's the div width considering there are other elements on the side. Is there another way to check if the string is overflow in javascript/typescript side?

Answer 1

HTML File

<div #theElementYouWantToCheck>
  .
  .
  .
  <button *ngIf="checkOverflow(theElementYouWantToCheck)"> More </button>

</div>

TS File

  checkOverflow (element) {
    return element.offsetHeight < element.scrollHeight ||
           element.offsetWidth < element.scrollWidth;
  }