skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-pagination

Implement Canopy pagination components in Angular projects with accessible controls.

23|46|Updated Sep 7, 2020
Search Tags:#accessibility#angular#best-practices#pagination#ui-components#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-pagination
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-pagination
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/pagination
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-pagination

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy pagination guidelines help teams implement consistent, accessible page navigation for large datasets in Angular projects.

Core Features & Use Cases

  • Establishes consistent page navigation patterns across components.
  • Handles responsive behavior, hiding controls on small datasets, and adapts button density for mobile.
  • Supports integration with lg-pagination to ensure accessible and predictable paging across the application.

Quick Start

Configure your Angular project to follow Canopy pagination guidelines for consistent paging behavior.

Frequently Asked Questions about canopy-pagination

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accessible pagination in Angular for large datasets?▼

Accessible pagination in Angular is achieved by following Canopy guidelines to manage current page state, items per page, and total items using the lg-pagination component for predictable navigation controls.

What is the best way to handle pagination button display logic in Angular UI components?▼

Pagination button display logic should follow best-practice guidelines that specify page button rendering rules and automatically hide navigation controls when only one page of data exists.

Does the Canopy pagination component support responsive behavior on mobile devices?▼

Yes, Canopy pagination supports responsive behavior by adapting button density for mobile screens and hiding controls on small datasets to maintain a clean UI.

How do I integrate the lg-pagination component into my Angular project?▼

You integrate lg-pagination by configuring your Angular project to follow Canopy pagination guidelines, ensuring the component manages total items, current page state, and accessible controls.

Why does my pagination UI not automatically hide when there is only one page?▼

Pagination UI fails to auto-hide on single pages if best-practice display logic is not implemented; Canopy guidelines specify requirements to automatically hide controls when only one page exists.

Related Skills

Explore More Software Engineering Skills→
yu13130122297yu13130122297

scout

Identify uncertainties in research framing, datasets, metrics, and baselines.

Community
Intermediate
DITEKmaxDITEKmax

angular-http

Automate HTTP data fetching in Angular apps with signals and resource().

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-forms-filter-buttons

Document Canopy filter button patterns for Angular single and multi-select controls.

Official
Intermediate
trantuddt12trantuddt12

angular-material

Implement Angular Material UI components with theming and accessibility.

Community
Intermediate