Tech Seeker

In this article, we are going to implement pagination using angular material in a sample angular(version 12) application. Create A Sample Angular Application: Let's create a sample angular project and also install the angular material package. Install Angular CLI: npm install -g @angular/cli Command To Create Angular Application: ng new your-project-name Command To Install Angular Material Package: ng add @angular/material API: Here I'm going to use a sample pagination API that I had created. Here I will show the sample response to gain the basic idea over the API. Create Response Models: Now let's create models to read the API JSON response. ng g class models/todo.model ng g class models/todo.paging.model models/todo.model.ts: export interface TodoModel { id:number; itemName: string; isCompleted:boolean; } models/todo.paging.model.ts: import { TodoModel } from "./todo.model"; export interface TodoPagingModel { data: TodoModel[], totalC

In this article, we will understand the pagination in the Vue3 application using the '@ocrv/vue-tailwind-pagination' plugin. Key Features Of Plugin: current -  The 'current' property to set the current page number. total - The 'total' property that represents the number of records for the table content. So based on this 'total' property value, the total number of page numbers display depends. per-page - The 'per-page' property to set the count for the records to display for each page. page-changed - The 'page-changed' event that raises on selecting the page. It outputs  '$event' which is nothing but the selected page number. Create A Vue3 Sample Application: To implement our pagination sample let's begin by creating a Vue3 sample application. Command To Create Vue3 Application: Vue Create Your_Sample_App_name Install Tailwind Pagination NPM Package: Tailwind Pagination NPM Package Command: npm install --save @ocrv/vue-ta