ngx-bootstrap: How to change the look of pagination buttons

Question

I use the Pagination component from ngx-bootstrap in my project and try to change the buttons and how it looks and fail. Is there a way to change it?

my Components:

<div class="table-container">
  <table class="table">
    <thead>
      <tr class="table-nav">
        <th scope="col">שנה</th>
        <th scope="col">סוג הדוח</th>
        <th scope="col">ח.פ</th>
        <th scope="col">שם החברה</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let tax of currentPage">
        <tr>
          <td>{{tax.year}}</td>
          <td>{{tax.type}}</td>
          <td>{{tax.cid}}</td>
          <td>{{tax.company}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
  <div class="table-footer">
  <pagination class="pagination" nextText=">" previousText="<" [align]="true" 
    [totalItems]="totalItems" (pageChanged)="pageChanged($event)">
  </pagination>
</div>
</div>

This is Default style:

I need to make it look like this:

Answer 1

I fixed it by added at first a class my-pagination in my pagination element like

<pagination 
                                    [maxSize]="maxSizeBtn" 
                                    [firstText]="firstText" 
                                    [lastText]="lastText"   
                                    [previousText]="prevText"   
                                    [nextText]="nextText"   
                                    [itemsPerPage]="perPage"
                                    [boundaryLinks]="showBoundaryLinks" 
                                    [totalItems]="totalItems" 
                                    [(ngModel)]="currentPage" 
                                    (pageChanged)="pageChanged($event)" 
                                    (numPages)="smallnumPages = $event" 
                                    id="comp-pagination" 
                                    class="my-pagination" 
                                    ></pagination> 

After this i force the selected page item to have to have a Red Background-color like this. you put the CSS instruction in your .css component file

// change the Pagination backgroud selected button color

.my-pagination::ng-deep .page-item.active .page-link {
    z-index: 1;
    color: #FFFFFF;
    background-color:red !important;
    border-color: #009DA0;
}

Don't forget the !important instruction with overide the default background-color of the selected page-item

Thanks