Angular Pagination Component

Pagination is a crucial feature for displaying large datasets in a user-friendly manner. This challenge asks you to build a reusable pagination component in Angular that allows users to navigate through data in manageable chunks. Implementing pagination improves performance by loading only the necessary data and enhances the user experience by preventing overwhelming displays.

Problem Description

You need to create an Angular component that handles pagination of a data array. The component should display page numbers and allow users to navigate between pages. The component should receive the total number of items, the number of items to display per page, and the current data array as input. It should then calculate the total number of pages and display the appropriate page numbers. Clicking on a page number should update the displayed data array to show only the items for that page.

Key Requirements:

• Input Parameters:
  • totalItems: The total number of items in the dataset (number).
  • itemsPerPage: The number of items to display on each page (number).
  • data: The array of data to be paginated (array of any type).
• Output Parameter:
  • (pageData): An event emitter that emits the data for the currently selected page.
• Page Number Display: Display page numbers in a visually appealing and intuitive manner.
• Navigation: Provide "Previous" and "Next" buttons to navigate between pages.
• Current Page Indication: Clearly indicate the currently selected page.
• Disabled Navigation: Disable the "Previous" button on the first page and the "Next" button on the last page.
• Data Filtering: Update the pageData output with the correct slice of the data array based on the selected page.

Expected Behavior:

• When the component initializes, it should calculate the total number of pages based on totalItems and itemsPerPage.
• The component should display the appropriate page numbers.
• Clicking on a page number should emit the corresponding slice of the data array via the (pageData) event.
• The "Previous" and "Next" buttons should navigate to the previous and next pages, respectively, and emit the corresponding data.
• The component should handle edge cases such as empty data arrays and invalid input values gracefully.

Edge Cases to Consider:

• totalItems is 0.
• itemsPerPage is 0 or negative.
• data is an empty array.
• The user tries to navigate beyond the first or last page.

Examples

Example 1:

Input: totalItems = 25, itemsPerPage = 5, data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
Output: Page numbers: 1 2 3 4 5.  Clicking on page 3 should emit [11, 12, 13, 14, 15]
Explanation: The total number of pages is 25 / 5 = 5. Clicking on page 3 should display items 11 through 15.

Example 2:

Input: totalItems = 12, itemsPerPage = 4, data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
Output: Page numbers: 1 2 3. Clicking on page 2 should emit ['e', 'f', 'g', 'h']
Explanation: The total number of pages is 12 / 4 = 3. Clicking on page 2 should display items 'e' through 'h'.

Example 3:

Input: totalItems = 5, itemsPerPage = 2, data = [10, 20, 30, 40, 50]
Output: Page numbers: 1 2 3. Clicking on page 1 should emit [10, 20]. Clicking on page 3 should emit [50].
Explanation: The total number of pages is 5 / 2 = 2.5, rounded up to 3.  The last page only contains one element.

Constraints

• totalItems must be a non-negative integer.
• itemsPerPage must be a positive integer.
• The data array can contain elements of any type.
• The component should be responsive and adapt to different screen sizes.
• The component should be reusable and easily integrated into different Angular applications.

Notes

• Consider using Angular's EventEmitter to emit the data for the selected page.
• You can use CSS to style the pagination component to match your application's design.
• Think about how to handle edge cases and invalid input values gracefully.
• Focus on creating a clean, well-structured, and reusable component.
• You can use Angular's template-driven forms or reactive forms to handle user input. However, for this challenge, simple template logic is preferred.
• Consider using a library like Angular Material for styling, but it is not required. The focus is on the pagination logic.