diff --git a/components/pagination/pager.component.ts b/components/pagination/pager.component.ts
index b53828c6d0..0582204e44 100644
--- a/components/pagination/pager.component.ts
+++ b/components/pagination/pager.component.ts
@@ -7,15 +7,16 @@ const pagerConfig = {
itemsPerPage: 10,
previousText: '« Previous',
nextText: 'Next »',
+ pageBtnClass: '',
align: true
};
const PAGER_TEMPLATE = `
diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
index f30e5fd664..93e254f15c 100644
--- a/components/pagination/pagination.component.ts
+++ b/components/pagination/pagination.component.ts
@@ -21,6 +21,8 @@ export interface PaginationConfig extends KeyAttribute {
previousText:string;
nextText:string;
lastText:string;
+ // css
+ pageBtnClass:string;
rotate:boolean;
}
@@ -38,6 +40,7 @@ const paginationConfig:PaginationConfig = {
previousText: 'Previous',
nextText: 'Next',
lastText: 'Last',
+ pageBtnClass: '',
rotate: true
};
@@ -45,31 +48,36 @@ const PAGINATION_TEMPLATE = `
`;
@@ -94,6 +102,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina
@Input() public nextText:string;
@Input() public lastText:string;
@Input() public rotate:boolean;
+ // css
+ @Input() public pageBtnClass:string;
@Input() public disabled:boolean;
@@ -189,6 +199,9 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina
this.directionLinks = typeof this.directionLinks !== 'undefined'
? this.directionLinks
: paginationConfig.directionLinks;
+ this.pageBtnClass = typeof this.pageBtnClass !== 'undefined'
+ ? this.pageBtnClass
+ : paginationConfig.pageBtnClass;
// base class
this.itemsPerPage = typeof this.itemsPerPage !== 'undefined'
diff --git a/components/pagination/readme.md b/components/pagination/readme.md
index 747624a9a9..5dd5728580 100644
--- a/components/pagination/readme.md
+++ b/components/pagination/readme.md
@@ -23,6 +23,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, IPagin
@Input() public nextText:string;
@Input() public lastText:string;
@Input() public rotate:boolean;
+ // css
+ @Input() public pageBtnClass: string;
@Input() public disabled:boolean;
@Input() public get itemsPerPage():number {}
@@ -49,6 +51,7 @@ export class PagerComponent extends Pagination {}
- `nextText` (`?string='Next'`) - next button text
- `firstText` (`?string='First'`) - first button text
- `lastText` (`?string='Last'`) - last button text
+ - `pageBtnClass` (`?string=''`) - add class to ``
### Pagination events
- `numPages` - fired when total pages count changes, `$event:number` equals to total pages count
@@ -61,6 +64,7 @@ export class PagerComponent extends Pagination {}
- `itemsPerPage` (`?number=10`) - maximum number of items per page. If value less than 1 will display all items on one page
- `previousText` (`?string='Previous'`) - previous button text
- `nextText` (`?string='Next'`) - next button text
+ - `pageBtnClass` (`?string=''`) - add class to ``
### Pager events
- `numPages` - fired when total pages count changes, `$event:number` equals to total pages count
diff --git a/demo/components/pagination/pagination-demo.html b/demo/components/pagination/pagination-demo.html
index f273a25e6e..0b9fadaef7 100644
--- a/demo/components/pagination/pagination-demo.html
+++ b/demo/components/pagination/pagination-demo.html
@@ -14,7 +14,7 @@ Default
Pager
-
+
Limit the maximum visible buttons