CODEWITHSUNDEEP
htmlcssangularpagination
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to replace Previous and next with Left and Right arrows in pagination using angular2

i have a pagination where i am getting previous and Next. Can anyone help me to replace that with Left and Right arrows

Html:

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

CSS:

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

This is the css for right and left arrows, how do i write this in html, i mean how to link?

Upvotes: 0

Views: 4911

Answers (2)

Abubakar Ahmad
Abubakar Ahmad

Reputation: 2583

No need to create a custom template. Use previousLabel and nextLabel attributes.

<pagination-controls previousLabel="&lsaquo;" nextLabel="&rsaquo;" (pageChange)="page = $event" id="1" maxSize="10" directionLinks="true" autoHide="true" class="page"></pagination-controls>

Upvotes: 1

Sravan
Sravan

Reputation: 18647

The pagination plugin you are using is fully customizable.

You can even create a completely customized template.

Here is an example I created,

Component,

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:

You can even add your css code and customize it as you require

Upvotes: 2

Related Questions