CODEWITHSUNDEEP
javascriptangulartypescriptwidthoverflow
Matt-pow
Matt-pow

Reputation: 986

typescript - detect if the div is overflow with text

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?

Upvotes: 6

Views: 17952

Answers (1)

Onurhan Aytac
Onurhan Aytac

Reputation: 434

HTML File

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

</div>

TS File

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

Upvotes: 27

Related Questions