color of pagination bootstrap current page angular

Question

I want to change color of pagination When in the current page and when you in the first page or last page pagination will disable

disable like this:

app.html

<ul *ngIf="(ticket$| async)?.length != 0" class="pagination justify-content-end">
  <li class="page-item">
    <a class="page-link" (click)="previousIndex()">Previous<span aria-hidden="true">&laquo;</span></a>
  </li>
  <li *ngFor="let i of getArrayFromNumber((ticket$| async)?.length); let in = index" class="page-item">
    <a class="page-link" (click)="updateIndex(in)">{{in+1}}<span class="sr-only">(current)</span></a>
  </li>
  <li class="page-item">
    <a class="page-link" (click)="nextIndex()">Next</a>
  </li>
</ul>

app.ts

  getArrayFromNumber(length) {
    this.max = (Math.ceil(length / 7))
    return new Array(Math.ceil(this.max));
  }

  updateIndex(pageIndex) {
    this.startIndex = pageIndex * 7;
    this.endIndex = this.startIndex + 7;
  }

  previousIndex() {
    if (this.tabindex > 0) {
      this.tabindex -= 1
    }
    this.startIndex = this.tabindex * 7;
    this.endIndex = this.startIndex + 7;
  }

  nextIndex() {
    if (this.tabindex < this.max - 1) {
      this.tabindex += 1
    }
    this.startIndex = this.tabindex * 7;
    this.endIndex = this.startIndex + 7;

  }

Answer 1

Add the below CSS in your css file. Here for example I have used orange background color for current active page, you can change to any color as per your requirements.

.pagination > .active > a , .pagination > .active > a:hover, .pagination > .active > a:focus {
    background-color: orange;
    border-color: orange;
}