typescript - divがテキストでオーバーフローしているかどうかを検出します。

Question

Angular2/Typescriptに、画面の幅に応じてdivがテキストでオーバーフローしているかどうかを検出する方法がありますか？テキストがオーバーフローしている場合は、[詳細]ボタンを表示します。右側にはブックマークアイコンもありますので、divの幅を考慮しなければなりません。私の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> 

私typescriptですで：

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

質問が側に他の要素があります考慮divの幅が何を見つける方法です。文字列がjavascript/typescript側でオーバーフローしているかどうかを調べる別の方法はありますか？

Answer 1

HTMLファイル

<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; 
    } 
    } 

の