Keep a button disabled until user reach the end of a text paragraph in Angular Material Dialog

Question

I'm using MatDialog of Angular Material to display a text paragraph and a button at the end. How to keep the button disabled until the user scroll down and reach the bottom end of that paragraph using Angular / JavaScript ?

Answer 1

You can do this by using the scroll event:

<mat-dialog-content (scroll)="onScroll($event)">
  all your content here...
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button [disabled]="buttonDisabled" mat-button>OK</button>
</mat-dialog-actions>

and the TS:

buttonDisabled = true;

onScroll(ev: any) {
  if (ev.target.offsetHeight + ev.target.scrollTop >= ev.target.scrollHeight) {
    this.buttonDisabled = false;
  }
}