{"flag":true,"single":true,"pageTitle":"server side Pagination in Angular","post":{"id":151,"user_id":"1","slug":"server-side-pagination-in-angular-8app","title":"server side Pagination in Angular","body":"<p>You need a service that will provide data from server, This library is built to work with <strong>Angular 13+<\/strong><\/p>\r\n<p>1.Install module using cmd<\/p>\r\n<pre class=\"language-markup\"><code>npm install ngx-pagination --save<\/code><\/pre>\r\n<p>2. Import Module in <strong>app.module.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>import {NgxPaginationModule} from 'ngx-pagination'; \/\/ &lt;-- import the module\r\n@NgModule({\r\n    imports: [BrowserModule, NgxPaginationModule], \/\/ &lt;-- include it in your app module\r\n})<\/code><\/pre>\r\n<p>3. In \/\/ my.component.ts<\/p>\r\n<pre class=\"language-markup\"><code>@Component({\r\n    selector: 'my-component',\r\n    template: `\r\n    &lt;ul&gt;\r\n      &lt;li *ngFor=\"let item of collection | paginate: { itemsPerPage: 10, currentPage: p }\"&gt; ... &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n               \r\n    &lt;pagination-controls (pageChange)=\"p = $event\"&gt;&lt;\/pagination-controls&gt;\r\n    `\r\n})\r\nexport class MyComponent {\r\n    p: number = 1;\r\n    collection: any[] = someArrayOfThings;  \r\n}<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p><strong>FOR SERVER SIDE:<\/strong><\/p>\r\n<p>1.In <strong>my.component.html<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div class=\"col-xl-3 col-md-6 col-12\" *ngFor=\"let hpd of top_deals_fav | paginate: { itemsPerPage: per_page, currentPage: current_page+1,totalItems:total_deals }\"&gt;\r\n{{hpd.id}}\r\n&lt;\/div&gt;\r\n\r\n&lt;pagination-controls current_page = \"current_page + 1\" (pageChange)=\"getPage($event)\"&gt;&lt;\/pagination-controls&gt;\r\n<\/code><\/pre>\r\n<p>2. in <strong>my.component.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>  top_deals:any;\r\n  top_deals_fav:any;\r\n  total_deals:number=0;\r\n  current_page: number = 0;\r\n  per_page :number = 10;\r\n  deals_found:boolean = true;\r\n\r\n loadData(){\r\n    const url = environment.apiUrl+'\/AllDeals;\r\n    this.apiService.get(url).subscribe(\r\n      (response) =&gt; {\r\n        if(response.flag){\r\n          this.total_deals = response.total_deals;\r\n          this.top_deals_fav = response.data;\r\n        });           \r\n        }\r\n      },\r\n      (error) =&gt; {\r\n        console.error(error); \/\/ Handle any errors\r\n      }\r\n    );\r\n  }\r\n\r\n  ngOnInit(){\r\n    this.loadData();\r\n  }\r\n\r\n  getPage(page: number) {\r\n      this.current_page = page-1;\r\n      this.loadData();\r\n  }<\/code><\/pre>\r\n<p>https:\/\/michaelbromley.github.io\/ngx-pagination\/#\/<\/p>","category_id":"13","is_private":"0","created_at":"2023-05-22T04:46:01.000000Z","updated_at":"2023-05-22T04:46:48.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"You need a service that will provide data from server, This library is built to work with Angular 13+ 1.Install module using cmd npm install - server side Pagination in Angular (Updated: May 22, 2023) - Read more about server side Pagination in Angular at my programming site [SITE]","categories":[]}