show an icon inside a html element if the element has content that is overflowing

Question

I want to show a copy to clipboard icon when the content inside a div overflows

I have a ng for of four divs and if any of that div is overflowing, i want to show a icon for that respective div.

<div *ngFor div of FourDivs (mouseenter)="IfDivHasOverflow($event)">
  <div *ngIf="hasOverflow"></div>
</div>

Script: @component mycomponent() {

 hasOverFlow:boolean = false;

 IfDivHasOverflow(event) {
   if(event.scrollHeight < event.cleintHeight) {
    this.hasOverflow = true;
   }
 }

Problem is the 'hasOverflow' is resolved true to every div in the ngfor repeat. All the four divs show an icon inside while what is neded is that the specific div that has overflow to contain the icon.

Any idea to solve this ?

Answer 1

Basically, you need a hasOverflow flag for each div.

Try the below code:

<div *ngFor="div of FourDivs" (mouseenter)="IfDivHasOverflow($event, div)">
  <div *ngIf="div.hasOverflow"></div>
</div>


 IfDivHasOverflow(event, div) {
    div.hasOverflow = false;
   if(event.scrollHeight < event.cleintHeight) {
    div.hasOverflow = true;
   }
 }