{"flag":true,"single":true,"pageTitle":"Pagination in Angular","post":{"id":75,"user_id":"3","slug":"pagination-in-angular-r1t6","title":"Pagination in Angular","body":"<ol>\r\n<li>install pagination. <strong>npm install ngx-pagination<\/strong><\/li>\r\n<li>import pagination and HttpClientModul in app.module.ts<\/li>\r\n<li>import HttpClient and Observable in your component.ts file<\/li>\r\n<li>Your method for HTTP call that is showing results should be observable.\r\n<pre class=\"language-markup\"><code>getAllCoup( currentPage: number, filter: any ): Observable&lt;any&gt;{\r\n\r\n    this.allCoupns = \"https:\/\/adscombined.com\/v1\/public\/api\/FilterCoupons?Filter=\"+filter+\"&amp;SubType=&amp;Page=\"+currentPage+\"&amp;PerPage=60\";\r\n    return this.allCoupons.post( this.allCoupns, {} );\r\n    \r\n  }<\/code><\/pre>\r\n<\/li>\r\n<li>add | paginate. (((&nbsp;\r\n<div>\r\n<div>&lt;div class=\"col-12\" *ngFor=\"let fCoup of filteredCategoryCoupons | paginate:{<\/div>\r\n<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; currentPage: currentPage,<\/div>\r\n<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemsPerPage: perPage,<\/div>\r\n<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; totalItems: TotalCouponsCount<\/div>\r\n<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }; let i = index\"&gt;<\/div>\r\n<\/div>\r\n)))<\/li>\r\n<li>&nbsp;<\/li>\r\n<\/ol>","category_id":"14","is_private":"0","created_at":"2023-03-29T00:40:30.000000Z","updated_at":"2023-03-29T00:50:20.000000Z","category":{"id":14,"user_id":"3","name":"Angular","slug":"angular-gd2h","parent_id":null,"created_at":"2023-03-28T22:24:44.000000Z","updated_at":"2023-03-28T22:24:44.000000Z"},"user":{"id":3,"name":"Muhammad Farhan","email":"helpinghour@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"3","profile_photo_path":null,"created_at":"2023-03-28T22:23:15.000000Z","updated_at":"2023-03-28T22:24:06.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=M+F&color=7F9CF5&background=EBF4FF"}},"pageDesc":" install pagination. npm install ngx-pagination import pagination and HttpClientModul in app.module.ts import HttpClient and Observable in y - Pagination in Angular (Updated: March 29, 2023) - Read more about Pagination in Angular at my programming site [SITE]","categories":[]}