CODEWITHSUNDEEP
javascripthtmlangulartypescriptconditional-operator
Heathcliff
Heathcliff

Reputation: 119

Disable button on condition

I'm building a custom pagination component in Angular where you can only press "previous" & "next".

I want to disable the "previous" button whenever the index is equal to 1, and disable the "next" button whenever the index is equal to the last page. Tried some different things i read with ternary operators and ng-if, but i can't get it to work.

This is my pagination component:

    <div class="btn-group" role="group" aria-label="pagination buttons">
  <button mat-icon-button class="vorige-icon" aria-label="vorige icon" (click)="onPrevious()">
    <mat-icon>chevron_left</mat-icon>
  </button>
  <span>{{this.currentPage + 1}} / {{this.totalPages}}</span>
  <button mat-icon-button class="volgende-icon" aria-label="volgende icon" (click)="onNext()">
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>

This is the condition:

checkDisabled() {
    if (this.currentPage <= 1 || this.currentPage >= this.totalPages) {
      this.isDisabled = true;
    }

Upvotes: 1

Views: 2149

Answers (2)

Muhammad Ali
Muhammad Ali

Reputation: 100

In HTML, we directly use the disabled property to disable the button. While in Angular, we need to bind [disabled] to native disable property.

Add property onPreviousPage()

[disabled]="index === 1"

Add property onNextPage()

[disabled]="index === lastPage"

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

you need to use [disabled] attribute for this

 <button mat-icon-button class="vorige-icon" aria-label="vorige icon" (click)="onPrevious()"  [disabled]="currentPage <= 1" >
    <mat-icon>chevron_left</mat-icon>
  </button>
 <button mat-icon-button class="volgende-icon" aria-label="volgende icon" (click)="onNext()" [disabled]="currentPage >= totalPages" >
    <mat-icon>chevron_right</mat-icon>
  </button>

Upvotes: 2

Related Questions