I'll try to give you a running idea, then you can understand and apply it to your case. You can check at this link.

Explanation of the example

In the component you have 4 important things to consider:

• isActionDisabled a variable that says if your action should be disabled or not
• @ViewChild('containerElement') containerElement a refer to the scrollable container of the table
• onScrollContainer a method that's executed when you scroll the containerElement
• disableByScroll a method that changes the value of isActionDisabled according to the position of the scrollbar of the containerElement. If it's on bottom isActionDisabled is false otherwise is true.

The most important method is disableByScroll:

disableByScroll(): void {
  if (this.containerElement) {
    const element = this.containerElement.nativeElement;
    this.isActionDisabled = !(
      element.scrollTop ===
      element.scrollHeight - element.clientHeight
    );
  } else {
    this.isActionDisabled = true;
  }
}

Please read this article to understand what I did. disableByScroll is called each time a scroll event is called on containerElement

onScrollContainer(): void {
  this.disableByScroll();
}

and after view init

ngAfterViewInit(): void {
  this.disableByScroll();
  this.cdr.detectChanges();
}

Please, read this guide to understand the lifecycle events of an Angular application. As you can see I called a method detectChanges of the ChangeDetectorRef. Reading that guide you'll understand why.

About the template, it's pretty simple and you can figure it out.

I'll try to give you a running idea, then you can understand and apply it to your case. You can check at this link.

Explanation of the example

In the component you have 4 important things to consider:

• isActionDisabled a variable that says if your action should be disabled or not
• @ViewChild('containerElement') containerElement a refer to the scrollable container of the table
• onScrollContainer a method that's executed when you scroll the containerElement
• disableByScroll a method that changes the value of isActionDisabled according to the position of the scrollbar of the containerElement. If it's on bottom isActionDisabled is false otherwise is true.

The most important method is disableByScroll:

disableByScroll(): void {
  if (this.containerElement) {
    const element = this.containerElement.nativeElement;
    this.isActionDisabled = !(
      element.scrollTop ===
      element.scrollHeight - element.clientHeight
    );
  } else {
    this.isActionDisabled = true;
  }
}

Please read this article to understand what I did. disableByScroll is called each time a scroll event is called on containerElement

onScrollContainer(): void {
  this.disableByScroll();
}

and after view init

ngAfterViewInit(): void {
  this.disableByScroll();
  this.cdr.detectChanges();
}

That is useful if you have a number of items that do not activate the scrollbar. Please, read this guide to understand the lifecycle events of an Angular application. As you can see I called a method detectChanges of the ChangeDetectorRef. Reading that guide you'll understand why.

About the template, it's pretty simple and you can figure it out.

A possible solution is to check if the last row is on viewport. You can do with a function like this:

const isVisible = (row, container) => {
    const { bottom, height, top } = row.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();

    return top <= containerRect.top
        ? (containerRect.top - top <= height)
        : (bottom - containerRect.bottom <= height);
};

I'll try to give you a running idea, then you can understand and apply it to your case. You can check at this link.

Explanation of the example

In the component you have 4 important things to consider:

• isActionDisabled a variable that says if your action should be disabled or not
• @ViewChild('containerElement') containerElement a refer to the scrollable container of the table
• onScrollContainer a method that's executed when you scroll the containerElement
• disableByScroll a method that changes the value of isActionDisabled according to the position of the scrollbar of the containerElement. If it's on bottom isActionDisabled is false otherwise is true.

The most important method is disableByScroll:

disableByScroll(): void {
  if (this.containerElement) { 
    const element = this.containerElement.nativeElement;
    this.isActionDisabled = !(
      element.scrollTop ===
      element.scrollHeight - element.clientHeight
    );
  } else {
    this.isActionDisabled = true;
  }
}

Please read this article to understand what I did. disableByScroll is called each time a scroll event is called on containerElement

onScrollContainer(): void {
  this.disableByScroll();
}

and after view init

ngAfterViewInit(): void {
  this.disableByScroll();
  this.cdr.detectChanges();
}

Please, read this guide to understand the lifecycle events of an Angular application. As you can see I called a method detectChanges of the ChangeDetectorRef. Reading that guide you'll understand why.

About the template, it's pretty simple and you can figure it out.