Tengo una pregunta simple sobre el diseño de paginación ngx en angular

Implementé con éxito la paginación para los resultados provenientes del servidor en la aplicación angular 8 usando la paginación ngx.

aquí está la plantilla:

<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>

No incluí detalles del archivo .ts porque no es relevante para la pregunta, el trabajo de paginación incluye hacer clic/seleccionar una página diferente. Echa un vistazo a la imagen adjunta para que puedas ver la paginación:

ingrese la descripción de la imagen aquí

Como puede ver en la imagen, el problema es solo el diseño del control, no se aplica css y también las páginas se muestran verticalmente.

Del tutorial encontré el elemento css que agregué a mi archivo styles.css de la siguiente manera:

 .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;
    }

Estos estilos css no tienen impacto. Suponiendo que los estilos sean correctos (puedo cambiarlos más tarde por el desarrollador de css), ¿puede enviar una respuesta con <pagination-template que incluya cómo aplicar los estilos?

¡Gracias!

Answer

Puede intentar anular los estilos ngx-paginator .

En el archivo scss del HTML donde está usando ese paginador, intente algo como esto:

: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;
    }

}

esto es solo un ejemplo. Debe seleccionar el elemento del paginador en su navegador e inspeccionar la forma exacta en que angular lo 'nombra' (para saber el nombre exacto que debe usar en el scss para anular el elemento específico).