How to disable a button with an observable?

Question

I have a next button that should be disabled if my observable value is false.

The observable is dataSource.next (if there is more data - next is true, otherwise it's false). This disables the button and stops the user from navigating if there is no more data.

component.html:

<button mat-button (click)="next()" [disabled]="!dataSource.next$ | async">
    <mat-icon>navigate_next</mat-icon>
</button>

However, although the value when outputted for dataSource.next is correct, it does not work as intended, perhaps it's because I'm trying to disable it if the value is false rather than true?

For example, when there is no more data, dataSource.next is false but the button is still enabled.

What is the solution?

Answer 1

Put the async pipe in parenthesis.

<button mat-button (click)="next()" [disabled]="!(dataSource.next$ | async)">
  <mat-icon>navigate_next</mat-icon>
</button>