typescript - erkennen, ob das div mit Text überläuft

Question

Gibt es in Angular2/Typescript eine Möglichkeit zu erkennen, ob das div mit Text überläuft, abhängig von der Breite des Bildschirms. Wenn der Text überläuft, möchte ich einen "Mehr" -Button anzeigen. Es gibt auch ein Lesezeichen-Symbol auf der rechten Seite, also muss ich die div-Breite berücksichtigen.

In meinem 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 meinem Typoskript:

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

Die Frage ist, wie Sie herausfinden, was die div Breite ist angesichts gibt es andere Elemente auf der Seite. Gibt es eine andere Möglichkeit zu überprüfen, ob die Zeichenfolge in der Javascript/Typoskript-Seite überläuft?

Answer 1

HTML Datei

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

</div> 

TS

checkOverflow (element) { 
    if (element.offsetHeight < element.scrollHeight || 
     element.offsetWidth < element.scrollWidth) { 
     return true; 
    } else { 
     return false; 
    } 
    }