I have simple question about ngx-pagination design in angular

Question

I have successfully implemented paging for results coming from the server in angular 8 app using the ngx-pagination.

here is the template:

<pagination-template #p="paginationApi"
                            (pageChange)="p2 = $event">

                            <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
                                <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
                            </div>

                            <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                                <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                                    <span>{{ page.label }}</span>
                                </a>
                                <div *ngIf="p.getCurrent() === page.value">
                                    <span>{{ page.label }}</span>
                                </div>
                            </div>

                            <div class="pagination-next" [class.disabled]="p.isLastPage()">
                                <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
                            </div>
                    
                      </pagination-template>

I didn't include details from.ts file cause it is not relevant to the question, the pagination work include clicking/select different page. Have a look in the picture attached so you can see the pagination:

As you can see from the picture, the problem is just the design of the control, no css applied and also the pages displayed vertically.

From the tutorial I found css element which I added to my styles.css file as follow:

 .custom-pagination .page-number{
        display: inline-block;
        /* padding: 5px 12px; */
        background: #afffe6;
        margin: 0px 4px;
        border-radius: 25px;
    }
    
    .page-number.current{
        background: #ffffff!important;
        border: 2px solid #458873;
    }
    
    .page-number span{
        display: block;
        width: 28px;
        height: 28px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .pagination-previous,.pagination-next{
        display: inline-block;
        font-weight: bold;
    }

This css styles make no impact. Assuming the styles are correct (I can change them later by the css developer) can you send an answer with <pagination-template which include how to apply the styles.

Thanks!

Answer 1

You can try to override the ngx-paginator styles .

In the scss file of the HTML where are using that paginator, try something like this:

:host ::ng-deep {

  .custom-pagination .page-number{
        display: inline-block;
        /* padding: 5px 12px; */
        background: #afffe6;
        margin: 0px 4px;
        border-radius: 25px;
    }
    
    .page-number.current{
        background: #ffffff!important;
        border: 2px solid #458873;
    }
    
    .page-number span{
        display: block;
        width: 28px;
        height: 28px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .pagination-previous,.pagination-next{
        display: inline-block;
        font-weight: bold;
    }

}

this is just an example. You have to select the paginator element in your browser and inspect the exact way that angular is 'nameing' it (in order to know the exact name you have to use in the scss for overriding the specific element).