How to perform some actions based on the position of a div section in a html page in Angular using getBoundingClientRect()

Question

I have a apply button in a filter bar with several filters , sometimes this apply button will display in the next row instead of showing it in the same row with the other filters. How can I perform a set of actions based on the position of this apply button. If the apply button is in the next row I want to do set of actions.

  <button (click)="apply() "
                    [ngClass]="{'a-btn--disabled': isDisable}" id="apply"
                    mat-raised-button  >Apply
           </button>

In component i am using getBoundingClientRect(),

 const height = document.getElementById('apply').getBoundingClientRect();
 console.log(height);

I am trying to get getBoundingClientRect() value from top in order to identify it in the first row or the second row. But getBoundingClientRect().top returns different values at different times. Therefore can't apply a specific condition based on these getBoundingClientRect() value to identify it in the first row or second row. How can i solve this?

Answer 1

you can just define an element like span above the button, and replace id attribute from button to span. then you can getBoundingClientRect() from span and it does not change at all.

<span id=apply></span>
  <button (click)="apply() "
                    [ngClass]="{'a-btn--disabled': isDisable}"
                    mat-raised-button  >Apply
           </button>