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?

Possible duplicate of Angular 2 Read More Directive

David Chelliah
– David Chelliah

2017-05-17 06:20:24 +00:00
Commented May 17, 2017 at 6:20 — David Chelliah
– David Chelliah, Commented May 17, 2017 at 6:20

Community · Accepted Answer · 2021-08-17 17:42:12Z

28

HTML File

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

</div>

TS File

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

edited Aug 17, 2021 at 17:42

CommunityBot

11 silver badge

answered May 17, 2017 at 8:06

Onurhan Aytac

4443 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

typescript - detect if the div is overflow with text

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related