{{content}}
\r\n\r\n Page changed to: {{page}}\r\n\r\n","import { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-pagination-pager',\r\n templateUrl: './pager.html',\r\n styles: ['.pager li.btn:active { box-shadow: none; }'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class DemoPaginationPagerComponent {\r\n totalItems: number = 64;\r\n currentPage: number = 4;\r\n smallnumPages: number = 0;\r\n\r\n pageChanged(event: any): void {\r\n console.log('Page changed to: ' + event.page);\r\n console.log('Number items per page: ' + event.itemsPerPage);\r\n }\r\n}\r\n","The selected page no: {{currentPage}}/{{smallnumPages}}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-pagination-rotate',\r\n templateUrl: './rotate.html'\r\n})\r\nexport class DemoPaginationRotateComponent {\r\n rotate = true;\r\n maxSize = 5;\r\n status = \"ON\";\r\n\r\n toggleBtn() : void {\r\n this.rotate = !this.rotate;\r\n this.status = this.rotate ? \"ON\" : \"OFF\";\r\n }\r\n}\r\n","Pagination - provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
\r\nPager - quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
\r\nThe easiest way to add the pagination component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component pagination\r\n
On small screens bootstrap4 pagination can be cropped
`,\r\n content: [\r\n {\r\n title: 'Basic',\r\n anchor: 'basic',\r\n component: require('!!raw-loader!./demos/basic/basic.ts'),\r\n html: require('!!raw-loader!./demos/basic/basic.html'),\r\n outlet: DemoPaginationBasicComponent\r\n },\r\n {\r\n title: 'Manual switching page',\r\n anchor: 'manual-switching',\r\n component: require('!!raw-loader!./demos/manual-switching/manual-switching.ts'),\r\n html: require('!!raw-loader!./demos/manual-switching/manual-switching.html'),\r\n outlet: DemoPaginationManualSwitchingComponent\r\n },\r\n {\r\n title: 'Page changed event',\r\n anchor: 'page-changed-event',\r\n component: require('!!raw-loader!./demos/page-changed-event/page-changed-event.ts'),\r\n html: require('!!raw-loader!./demos/page-changed-event/page-changed-event.html'),\r\n outlet: DemoPaginationPageChangedComponent\r\n },\r\n {\r\n title: 'Pages count changed event',\r\n anchor: 'pages-count-changed',\r\n component: require('!!raw-loader!./demos/pages-count-changed/pages-count-changed.ts'),\r\n html: require('!!raw-loader!./demos/pages-count-changed/pages-count-changed.html'),\r\n outlet: DemoPaginationPagesCountChangedComponent\r\n },\r\n {\r\n title: 'Boundary links',\r\n anchor: 'boundary-links',\r\n component: require('!!raw-loader!./demos/boundary-links/boundary-links.ts'),\r\n html: require('!!raw-loader!./demos/boundary-links/boundary-links.html'),\r\n outlet: DemoPaginationBoundaryLinksComponent\r\n },\r\n {\r\n title: 'Direction links',\r\n anchor: 'direction-links',\r\n component: require('!!raw-loader!./demos/direction-links/direction-links.ts'),\r\n html: require('!!raw-loader!./demos/direction-links/direction-links.html'),\r\n outlet: DemoPaginationDirectionLinksComponent\r\n },\r\n {\r\n title: 'Custom links content',\r\n anchor: 'custom-links-content',\r\n component: require('!!raw-loader!./demos/custom-links-content/custom-links-content.ts'),\r\n html: require('!!raw-loader!./demos/custom-links-content/custom-links-content.html'),\r\n outlet: DemoPaginationCustomLinksContentComponent\r\n },\r\n {\r\n title: 'Disabled',\r\n anchor: 'pagination-disabled',\r\n component: require('!!raw-loader!./demos/disabled/disabled.ts'),\r\n html: require('!!raw-loader!./demos/disabled/disabled.html'),\r\n outlet: DemoPaginationDisabledComponent\r\n },\r\n {\r\n title: 'Limits',\r\n anchor: 'pagination-limit',\r\n component: require('!!raw-loader!./demos/limit/limit.ts'),\r\n html: require('!!raw-loader!./demos/limit/limit.html'),\r\n description: `Limit the maximum visible page numbers
`,\r\n outlet: DemoPaginationLimitComponent\r\n },\r\n {\r\n\r\n title: 'Centering the active page link',\r\n anchor: 'pagination-rotate',\r\n component: require('!!raw-loader!./demos/rotate/rotate.ts'),\r\n html: require('!!raw-loader!./demos/rotate/rotate.html'),\r\n description: `Set current page link to center
`,\r\n outlet: DemoPaginationRotateComponent\r\n },\r\n {\r\n title: 'Content switching',\r\n anchor: 'content-switching',\r\n component: require('!!raw-loader!./demos/content-switching/content-switching.ts'),\r\n html: require('!!raw-loader!./demos/content-switching/content-switching.html'),\r\n outlet: DemoPaginationContentSwitchingComponent\r\n },\r\n {\r\n title: 'Pager',\r\n anchor: 'pagination-pager',\r\n component: require('!!raw-loader!./demos/pager/pager.ts'),\r\n html: require('!!raw-loader!./demos/pager/pager.html'),\r\n outlet: DemoPaginationPagerComponent\r\n },\r\n {\r\n title: 'Custom Template',\r\n anchor: 'custom-template',\r\n description: `\r\n\r\n It is possible to customize what exactly is displayed in each pagination link. To overwrite default\r\n templates use these inputs:\r\n
customPageTemplatecustomNextTemplatecustomPreviousTemplatecustomFirstTemplatecustomLastTemplatePaginationLinkContext is available for all\r\n templates and for page numbers there is a PaginationNumberLinkContext that\r\n contains the page number.\r\n \r\n `,\r\n component: require('!!raw-loader!./demos/custom-template/custom-template.ts'),\r\n html: require('!!raw-loader!./demos/custom-template/custom-template.html'),\r\n outlet: DemoPaginationCustomTemplateComponent\r\n }\r\n /* TODO: temporary disabled pageBtnClass option\r\n {\r\n title: 'Styling',\r\n anchor: 'pagination-styling',\r\n component: require('!!raw-loader!./demos/styling-global/styling-global.ts'),\r\n html: require('!!raw-loader!./demos/styling-global/styling-global.html'),\r\n outlet: DemoPaginationStylingComponent\r\n }*/\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'PaginationComponent',\r\n anchor: 'pagination-component',\r\n outlet: NgApiDocComponent\r\n },\r\n {\r\n title: 'PagerComponent',\r\n anchor: 'pager-component',\r\n outlet: NgApiDocComponent\r\n },\r\n {\r\n title: 'PaginationConfig',\r\n anchor: 'pagination-config',\r\n outlet: NgApiDocConfigComponent\r\n },\r\n {\r\n title: 'PaginationLinkContext',\r\n anchor: 'pagination-link-context',\r\n outlet: NgApiDocConfigComponent\r\n },\r\n {\r\n title: 'PaginationNumberLinkContext',\r\n anchor: 'pagination-number-link-context',\r\n outlet: NgApiDocConfigComponent\r\n },\r\n {\r\n title: 'PagesModel',\r\n anchor: 'pagination-models',\r\n outlet: NgApiDocConfigComponent\r\n }\r\n ]\r\n }\r\n];\r\n","export default \"{{content}}
\\r\\n\\r\\n Page changed to: {{page}}\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-pagination-page-changed-event',\\r\\n templateUrl: './page-changed-event.html'\\r\\n})\\r\\nexport class DemoPaginationPageChangedComponent {\\r\\n currentPage = 4;\\r\\n page: number;\\r\\n\\r\\n pageChanged(event: any): void {\\r\\n this.page = event.page;\\r\\n }\\r\\n}\\r\\n\";","export default \"The selected page no: {{currentPage}}/{{smallnumPages}}\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-pagination-pages-count-changed',\\r\\n templateUrl: './pages-count-changed.html'\\r\\n})\\r\\nexport class DemoPaginationPagesCountChangedComponent {\\r\\n currentPage = 4;\\r\\n smallnumPages = 0;\\r\\n}\\r\\n\";","export default \"