So ersetzen Sie Previous und Next mit den Links- und Rechtspfeilen in der Paginierung mit angular2

Question

Ich habe eine Seitennummerierung, wo ich die vorherige und nächste erhalten. Kann mir jemand helfen, dass links und rechts Pfeile

Html zu ersetzen: rechts und links Pfeile, wie schreibe ich dieses

.left { 
    display: inline-block; 
    width: 4em; 
    height: 4em; 
    margin-right: 1.5em; 
} 

.left:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 1.05em; 
    margin-left: 0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.5em solid #333; 
    border-right: 0.5em solid #333; 
    -moz-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 

.right { 
    display: inline-block; 
    width: 4em; 
    height: 4em; 
    margin-left: 1.5em; 
} 

.right:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 1.05em; 
    margin-left: -0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.5em solid #333; 
    border-right: 0.5em solid #333; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Dies ist die CSS in:

<pagination-controls (pageChange)="page = $event" id="1" maxSize="10" directionLinks="true" autoHide="true" class="page"> 
     </pagination-controls> 

CSS html, ich meine, wie man verbindet?

Answer 1

Das Paginierungs-Plugin, das Sie verwenden, ist vollständig anpassbar.

Sie können sogar eine vollständig benutzerdefinierte Vorlage erstellen. Hier

ist ein Beispiel, das ich geschaffen,

Komponente,

export class AppComponent { 
    collection = []; 
    constructor() { 
    for (let i = 1; i <= 100; i++) { 
     this.collection.push(`item ${i}`); 
    } 
    } 
    public config: PaginationInstance = { 
     id: 'custom', 
     itemsPerPage: 10, 
     currentPage: 1, 
     directionLinks: false 
    }; 
} 

Customized HTML,

<div class="container-fluid"> 
    <div class="row"> 
    <div class="medium-8 medium-offset-2 columns"> 
     <h2 class="subheader"></h2> 
     <ul> 
      <li *ngFor="let item of collection | paginate: config">{{ item }}</li> 
     </ul> 
    </div> 
    </div> 
    <div class="row"> 
    <pagination-template #p="paginationApi" 
    [id]="config.id" 
    (pageChange)="config.currentPage = $event"> 
    <div class="custom-pagination"> 
     <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> 
    </div> 
    </pagination-template> 
    </div> 
</div> 

Here is their official custom template document

A WORKING DEMO

PS:

Sie können sogar Ihre CSS-Code hinzufügen, und passen Sie es, wie Sie benötigen