Add and use ngx-pagination template that follows AdminBSB's style

Author: Vitor Durante

angular/src/app/roles/roles.component.html

@@ -45,7 +45,7 @@ <h2>
                 </table>
 
                 <div class="text-align: center;" *ngIf="totalItems > pageSize">
-                    <pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
+                    <abp-pagination-controls (pageChange)="getDataPage($event)" id="server"></abp-pagination-controls>
                 </div>
                 <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createRole()">
                     <i class="material-icons">add</i>
@@ -56,4 +56,4 @@ <h2>
 </div>
 
 <create-role-modal #createRoleModal (modalSave)="refresh()"></create-role-modal>
-<edit-role-modal #editRoleModal (modalSave)="refresh()"></edit-role-modal>
+<edit-role-modal #editRoleModal (modalSave)="refresh()"></edit-role-modal>

angular/src/app/tenants/tenants.component.html

@@ -52,7 +52,7 @@ <h2>
                 </table>
 
                 <div class="text-align: center;" *ngIf="totalItems > pageSize">
-                    <pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
+                    <abp-pagination-controls (pageChange)="getDataPage($event)" id="server"></abp-pagination-controls>
                 </div>
                 <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createTenant()">
                     <i class="material-icons">add</i>

angular/src/app/users/users.component.html

@@ -56,7 +56,7 @@ <h2>
             <!-- ******************************************************** -->
 
                 <div class="text-align: center;" *ngIf="totalItems > pageSize">
-                    <pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
+                    <abp-pagination-controls (pageChange)="getDataPage($event)" id="server"></abp-pagination-controls>
                 </div>
                 <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createUser()">
                     <i class="material-icons">add</i>
@@ -67,4 +67,4 @@ <h2>
 </div>
 
 <create-user-modal #createUserModal (modalSave)="refresh()"></create-user-modal>
-<edit-user-modal #editUserModal (modalSave)="refresh()"></edit-user-modal>
+<edit-user-modal #editUserModal (modalSave)="refresh()"></edit-user-modal>

angular/src/shared/pagination/abp-pagination-controls.component.html

@@ -0,0 +1,38 @@
+<pagination-template #p="paginationApi"
+                     [id]="id"
+                     [maxSize]="maxSize"
+                     (pageChange)="pageChange.emit($event)">
+    <nav>
+        <ul class="pagination"
+            role="navigation"
+            *ngIf="!(autoHide && p.pages.length <= 1)">
+
+            <li [class.disabled]="p.isFirstPage()" *ngIf="directionLinks">
+                <a *ngIf="!p.isFirstPage()"
+                   (click)="p.previous()">
+                  <i class="material-icons">chevron_left</i>
+                </a>
+                <a *ngIf="p.isFirstPage()">
+                  <i class="material-icons">chevron_left</i>
+                </a>
+            </li>
+
+            <li [class.active]="p.getCurrent() === page.value"
+                *ngFor="let page of p.pages">
+                <a (click)="p.setCurrent(page.value)">{{ page.label }}</a>
+            </li>
+
+            <li [class.disabled]="p.isLastPage()"
+                *ngIf="directionLinks">
+                <a *ngIf="!p.isLastPage()"
+                   (click)="p.next()">
+                 <i class="material-icons">chevron_right</i>
+            </a>
+                <a *ngIf="p.isLastPage()">
+                 <i class="material-icons">chevron_right</i>
+                </a>
+            </li>
+        </ul>
+    </nav>
+
+</pagination-template>

angular/src/shared/pagination/abp-pagination-controls.component.ts

@@ -0,0 +1,37 @@
+import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core'
+
+@Component({
+  selector: 'abp-pagination-controls',
+  templateUrl: './abp-pagination-controls.component.html'
+})
+export class AbpPaginationControlsComponent {
+    @Input() id: string;
+    @Input() maxSize = 7;
+
+    @Input()
+    get directionLinks(): boolean {
+        return this._directionLinks;
+    }
+
+    set directionLinks(value: boolean) {
+        this._directionLinks = !!value && <any>value !== 'false';
+    }
+
+    @Input()
+    get autoHide(): boolean {
+        return this._autoHide;
+    }
+
+    set autoHide(value: boolean) {
+        this._autoHide = !!value && <any>value !== 'false';
+    }
+    @Input() previousLabel = 'Previous';
+    @Input() nextLabel = 'Next';
+    @Input() screenReaderPaginationLabel = 'Pagination';
+    @Input() screenReaderPageLabel = 'page';
+    @Input() screenReaderCurrentLabel = `You're on page`;
+    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+    private _directionLinks = true;
+    private _autoHide = false;
+}

angular/src/shared/shared.module.ts

@@ -8,6 +8,7 @@ import { AppUrlService } from './nav/app-url.service';
 import { AppAuthService } from './auth/app-auth.service';
 import { AppRouteGuard } from './auth/auth-route-guard';
 import { MaterialInput } from 'shared/directives/material-input.directive';
+import { AbpPaginationControlsComponent } from './pagination/abp-pagination-controls.component';
 
 @NgModule({
     imports: [
@@ -16,10 +17,12 @@ import { MaterialInput } from 'shared/directives/material-input.directive';
         RouterModule
     ],
     declarations: [
-        MaterialInput
+        MaterialInput,
+        AbpPaginationControlsComponent
     ],
     exports: [
-        MaterialInput
+        MaterialInput,
+        AbpPaginationControlsComponent
     ]
 })
 export class SharedModule {