### Install Clarity UI npm package

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/ui/README.md

Installs the Clarity UI package using npm, making it available for use in a project.

```bash
npm install @clr/ui
```

--------------------------------

### Install Clarity UI package via npm

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md

Installs the core Clarity UI package using the npm package manager.

```bash
npm install @clr/ui
```

--------------------------------

### Start Clarity Documentation Demo Website

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DOCUMENTATION.md

This command initiates the local development server for the Clarity documentation website. Once started, developers can view their changes in a web browser, typically at 'localhost:8080', allowing for real-time testing and iteration.

```bash
npm run start
```

--------------------------------

### Compact Datagrid Example

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

An example of a compact datagrid, showing basic user and Pokemon data.

```HTML/Angular
User ID Name Pokemon {{user.id}} {{user.name}} {{user.pokemon.name}} {{users.length}} users
```

--------------------------------

### Install Clarity Project Dependencies

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DOCUMENTATION.md

This command installs all necessary Node.js dependencies for the Clarity documentation project. It ensures that all required packages are available for running the development environment and building the documentation site.

```bash
npm install
```

--------------------------------

### Clarity Grid Layout: Start Alignment

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/grid/alignment/horizontal/horizontal-alignment.html

Demonstrates how to align grid items to the start of the container using Clarity CSS classes, typically applied to a parent container to control the horizontal positioning of its child columns.

```HTML
.clr-col-4
.clr-col-4
```

--------------------------------

### Install Clarity Angular and related packages via npm

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md

Installs all necessary Clarity packages for Angular development, including Clarity UI, Clarity Angular, and Clarity Core, using the npm package manager.

```bash
npm install @clr/ui @clr/angular @cds/core
```

--------------------------------

### Install unreleased Clarity UI and Angular builds from GitHub

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md

Installs unreleased preview builds of Clarity UI and Angular packages directly from their respective GitHub branches. This allows developers to access the latest features and bug fixes before they are officially released to npm.

```bash
npm install @clr/ui@github:vmware-clarity/ng-clarity.git#preview-build/main/clr-ui --force
npm install @clr/angular@github:vmware-clarity/ng-clarity.git#preview-build/main/clr-angular --force
```

--------------------------------

### Clarity Contribution Proposal Template

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_FEATURES.md

A detailed markdown template for submitting code contribution proposals to the Clarity project. It guides developers through describing the change, providing examples, outlining the intended API, and detailing the implementation plan.

```markdown
## Summary

Describe the change or feature in detail. Try to answer the following questions.

- What is the change?
- What is a use case for this change?
- Why should it go in Clarity?
- Is this a change to an Angular Component or a Web Component?
- Does this change impact existing behaviors? If so, how?
- If this change introduces a new behavior, is this behavior accessible?

## Examples

_If possible, show examples of the change. You may create one yourself, or link to external sites that have the idea. It can also be beneficial to prototype the idea in isolation outside of Clarity with a Plunkr or Stackblitz example._

## API

_Describe the intended API for the feature you want to add. This would include:_

- CSS classes and DOM structure for pure static UI contribution
- If Angular: any inputs/outputs, components, directives, services, or anything that is exported publicly for Angular contributions.
- If Web Component: any properties, events, slots, or attributes.
- Examples of code snippets using this new feature.
- Note very clearly if anything **might** be a breaking change.

_In the case of bug fixes or internal changes, there will most likely be no API changes._

## Implementation Plan

_Describe how you plan to implement the feature, answering questions among the following or anything else you deem relevant._

- What parts of the code are affected?
- Will you introduce new services, components, or directives?
- Can you describe the basic flow of information between classes?
- Does this introduce asynchronous behaviors?
- Will you need to refactor existing Clarity code?
- Will reasonable performance require optimizations?
- Will it need to access native elements (and be incompatible with server-side rendering)?

## Conclusion

_Describe how long you expect it to take to implement, what help you might need, and any other details that might be helpful. Don't worry, this is non-contractual. 😛_
```

--------------------------------

### Clarity Grid Layout: Space Between Items

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/grid/alignment/horizontal/horizontal-alignment.html

Explains distributing space evenly between grid items, pushing the first item to the start and the last item to the end of the container, using Clarity CSS classes.

```HTML
.clr-col-4
.clr-col-4
```

--------------------------------

### Include Clarity UI CSS files in HTML

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/ui/README.md

Adds the necessary Clarity UI and Core CSS stylesheets to an HTML document, linking them from the node_modules directory.

```html
<link rel="stylesheet" href="path/to/node_modules/@cds/core/global.min.css">
<link rel="stylesheet" href="path/to/node_modules/@cds/core/styles/theme.dark.min.css">
<link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
```

--------------------------------

### Example Commit Message for Clarity Date Picker Fix

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEVELOPMENT.md

This example demonstrates a properly formatted commit message for a bug fix related to the date-picker component. It illustrates the use of 'fix' as the type, 'date-picker' as the scope, a concise description, a detailed body explaining the changes, and a GitHub issue closing reference, followed by the 'Signed-off-by' line.

```APIDOC
fix(date-picker): adds aria-labels for buttons

- adds proper labels for all datepicker buttons
- adds live region for calendar view that updates month/year values for screen readers
- adds live region to year view that updates the decade range for screen readers
- updates templates for ClrCommonStringsService

Close: #4242

Signed-off-by: Your Name <your.email@example.com>
```

--------------------------------

### Apply Clarity UI theme to body tag

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/ui/README.md

Sets the Clarity UI theme (light or dark) by adding the `cds-theme` attribute to the HTML body tag.

```html
<body cds-theme"light">
```

--------------------------------

### Install Clarity Angular Packages via npm

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/README.md

Installs the core Clarity UI, Angular components, and core design system packages using the npm package manager. This is the first step to integrate Clarity into an Angular project.

```npm
npm install @clr/ui @clr/angular @cds/core
```

--------------------------------

### Example Commit Message Format for Clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_FEATURES.md

Illustrates the required format for commit messages in the Clarity project, including type, scope, subject, body, issue references, and sign-off.

```Text
fix(date-picker): adds aria-labels for buttons

- adds proper labels for all datepicker buttons
- adds live region for calendar view that updates month/year values for screen readers
- adds live region to year view that updates the decade range for screen readers
- updates templates for ClrCommonStringsService

Close: #4242

Signed-off-by: Your Name <your.email@example.com>
```

--------------------------------

### Basic Data Grid Template Example

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/smart-iterator/smart-iterator.html

A basic Angular template fragment demonstrating data binding for user properties within a data grid context. This example illustrates the type of content managed by `*clrDgItems`, which provides enhanced control for features like sorting, filtering, and pagination.

```HTML
User ID Name Creation date Favorite color
{{user.id}} {{user.name}} {{user.creation | date}} {{users.length}} users
```

--------------------------------

### Include Clarity UI CSS in HTML

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md

Integrates the required Clarity CSS files, including global styles, dark theme, and the main UI stylesheet, into an HTML document using link tags. Ensure the paths are correct relative to your project's node_modules directory.

```HTML
<link rel="stylesheet" href="path/to/node_modules/@cds/core/global.min.css">
<link rel="stylesheet" href="path/to/node_modules/@cds/core/styles/theme.dark.min.css">
<link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
```

--------------------------------

### Clarity Datagrid Footer Template Example

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/responsive-footer/responsive-footer.html

An HTML template fragment illustrating the structure of a Clarity Datagrid's responsive footer. It includes column headers, data rows with Angular bindings, a 'no users found' message, a custom static footer, and dynamic pagination controls.

```HTML
User ID Name Creation date Pokemon Favorite color
No users found
{{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}}
The pokemon is strong.
A custom static footer
Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Example Commit Message Format for ng-clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_BUG_FIXES.md

This example demonstrates the required format for commit messages in the ng-clarity project, including the type, scope, subject, detailed bullet points for changes, a reference to the closed issue, and the DCO 'Signed-off-by' line.

```text
fix(date-picker): adds aria-labels for buttons

- adds proper labels for all datepicker buttons
- adds live region for calendar view that updates month/year values for screen readers
- adds live region to year view that updates the decade range for screen readers
- updates templates for ClrCommonStringsService

Close: #4242

Signed-off-by: Your Name <your.email@example.com>
```

--------------------------------

### Clarity Build and Development Commands

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/BUILD.md

Provides a comprehensive list of `npm` scripts for managing the Clarity project, including cleaning, linting, building, testing, public API checks, commit message formatting, release preview, and starting the demo application. These commands are compatible with Node.js v16+.

```bash
npm run clean
npm run lint
npm run lint:fix
npm run lint:changed
npm run lint:changed:fix
npm run build
npm run test
npm run test:watch
npm run public-api:check
npm run public-api:update
npm run commit
npm run preview
npm run start
```

--------------------------------

### Include Clarity Styles in Angular.json Configuration

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/README.md

Shows how to include Clarity Design System's global, dark theme, and UI styles by referencing their paths within the `styles` array of the `angular.json` configuration file. This method ensures the styles are bundled with the application build.

```JSON
  //...
  "styles": [
    "node_modules/@cds/core/global.min.css",
    "node_modules/@cds/core/styles/theme.dark.min.css",
    "node_modules/@clr/ui/clr-ui.min.css",
    //... any other styles
  ]
  //...
```

--------------------------------

### Import ClarityModule into Angular application's module

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md

Imports the ClarityModule into an Angular application's main module (e.g., AppModule). This step is crucial for making Clarity components and services available throughout your Angular application.

```TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from '@clr/angular';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        ClarityModule,
        ....
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
})
export class AppModule {    }
```

--------------------------------

### Datagrid Smart Column Sizing

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Demonstrates how Datagrid columns can intelligently size themselves based on header and data content, showing examples of long headers with short data and short headers with large data.

```HTML/Angular
This column as a long header but short data Short header Large data {{user.id}} {{user.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor tellus, tincidunt eget mauris molestie, ullamcorper facilisis lacus. Vivamus sagittis suscipit libero, et tristique justo consectetur eget. {{nonPaginatedUsers.length}} users
```

--------------------------------

### Clarity Grid Layout: Space Around Items

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/grid/alignment/horizontal/horizontal-alignment.html

Demonstrates distributing space evenly around grid items, including half-space at the ends of the container, using Clarity CSS classes for balanced distribution.

```HTML
.clr-col-4
.clr-col-4
```

--------------------------------

### Recommended: Use Structural Directives for Simplified API

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CODING_GUIDELINES.md

This example demonstrates the recommended approach of introducing a new structural directive that behaves like `*ngFor`. This directive automatically communicates with its parent component via services, resulting in a much cleaner and more pleasant API for consumers.

```HTML
<clr-carousel>
  <h1 *clrVisible="let item of items">{{item}}</h1>
</clr-carousel>
```

--------------------------------

### Clarity Table Forced Column Widths

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/column-sizing/column-sizing.html

Illustrates how to explicitly set column widths in Clarity tables using CSS or style bindings, providing examples for user ID, name, and Pokemon data, and showing how a column can be fixed at 300px.

```HTML
User ID Name Style binding to 200px Pokemon 300px specified through CSS {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} This column always is 300px wide. {{users.length}} users
```

--------------------------------

### Import Clarity Styles in SCSS File

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/README.md

Illustrates an alternative method to include Clarity Design System's global, dark theme, and UI styles by importing them directly into a top-level SCSS file using the `@use` directive. This approach is suitable for projects using Sass pre-processing.

```SCSS
@use '@cds/core/global.min.css';
@use '@cds/core/styles/theme.dark.min.css';
@use '@clr/ui/clr-ui.min.css';
```

--------------------------------

### Import ClarityModule into Angular Application

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/README.md

Demonstrates how to import the `ClarityModule` into the main Angular application module (`AppModule`). This step is crucial for making Clarity components available throughout the application. It also includes `BrowserModule` for standard browser functionalities.

```TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from '@clr/angular';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        ClarityModule,
        ....
         ],
         declarations: [ AppComponent ],
         bootstrap: [ AppComponent ]
})
export class AppModule {    }
```

--------------------------------

### Clarity Table Smart Column Sizing

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/column-sizing/column-sizing.html

Demonstrates how Clarity tables can automatically adjust column widths based on content, showing examples of long headers with short data and vice-versa, using Angular-like templating for data display.

```HTML
This column as a long header but short data Short header Large data {{user.id}} {{user.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor tellus, tincidunt eget mauris molestie, ullamcorper facilisis lacus. Vivamus sagittis suscipit libero, et tristique justo consectetur eget. {{users.length}} users
```

--------------------------------

### Clarity Datagrid Component CSS Class Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/data/datagrid/STYLES.md

A reference guide to the CSS classes used internally and externally by the VMware Clarity Datagrid component. Each class is described with its primary function within the datagrid's structure and behavior.

```APIDOC
CSS Classes:
  datagrid-row-master: Internal class used for calculcation mode and wrapper element for row content.
  datagrid-row-scrollable: Scrollable container for the row.
  datagrid-scrolling-cells: Container for the scrolling cells within the row.
  datagrid-select: Container for the selection checkbox/radio buttons.
  datagrid-signpost-trigger: Internal class for datagrid cells if there are signposts in it.
  is-open: Applied to the detail caret button when detail row open.
  is-replaced: Applied to the scrollable container when row replaced.
  pagination: Pagination element.
  pagination-current: Current page input.
  pagination-description: Pagination description.
  pagination-description-compact: The compact description when detail view is opened.
  pagination-first: First page button.
  pagination-last: Last page button.
  pagination-list: Pagination buttons.
  pagination-next: Next page button.
  pagination-previous: Previous page button.
  pagination-size: Wrapper for datagrid page size element.
  sort-icon: Sort icon for sortable columns.
```

--------------------------------

### Form Section with Model Data and Submit (Angular Template)

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/modal/modal-form.demo.html

This Angular template snippet demonstrates a UI section that combines static text ('Contact Info'), dynamic model data displayed as JSON, and a 'Submit' button. It suggests a form-like context where user input or data review might occur.

```Angular
Contact Info Model Info: {{model | json}} Submit
```

--------------------------------

### Displaying Datagrid Row, Column, and Pagination Information

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/performance/performance.html

This snippet illustrates how to display various data points related to a Clarity datagrid, including total rows and columns, individual cell data, full row JSON, and pagination details like current item range and total items.

```Angular Template
Rows: {{totalRows}}, Cols: {{totalCols}}
{{col.name}} {{row.cells[col.name]}} {{row|json}} Elements per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} rows
```

--------------------------------

### Avoid Incorrect Input Placement and Manual Component Communication

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CODING_GUIDELINES.md

This example illustrates an anti-pattern where an input is received on the 'wrong' component, requiring the user to handle communication between linked components using template reference variables. This design complicates component interaction.

```HTML
<clr-carousel #carousel [clrItems]="items">
  <h1 *ngFor="let item of carousel.visible">{{item}}</h1>
</clr-carousel>
```

--------------------------------

### Displaying Angular Change Detection Performance Metrics

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/performance/performance.html

This snippet demonstrates how to bind and display real-time change detection performance metrics within an Angular template. It shows the milliseconds per tick, total ticks, total time, and the full JSON representation of the `timeCD` object.

```Angular Template
ms per tick: {{timeCD.msPerTick}}
Total ticks: {{timeCD.numTicks}}
Total time in MS: {{timeCD.numTicks * timeCD.msPerTick}}
time change detection JSON: {{timeCD|json}}
```

--------------------------------

### Displaying Clarity Navigation Items with Links

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/vertical-nav/nested-icon-menus/vertical-nav-nested-icon-menus.demo.html

This snippet illustrates the structure for a navigation item within a Clarity nav group, where both the parent and child items are rendered as clickable links. It utilizes Angular template syntax for data binding and JavaScript placeholder links.

```Angular
[{{item.label}}](javascript://) [{{childItem.label}}](javascript:void(0))
```

--------------------------------

### Clarity Grid Layout: Center Alignment

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/grid/alignment/horizontal/horizontal-alignment.html

Illustrates centering grid items within their container using Clarity CSS classes. This alignment distributes available space equally on both sides of the grouped columns.

```HTML
.clr-col-4
.clr-col-4
```

--------------------------------

### Avoid Ng-Template with Implicit Context in Clarity API

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CODING_GUIDELINES.md

This example demonstrates an anti-pattern where an `<ng-template>` is used with an `$implicit` value, forcing the consumer to manually bind it to a local template variable. This approach makes the API less intuitive and more verbose.

```HTML
<clr-carousel [clrItems]="items">
  <ng-template let-item>
    <h1>{{item}}</h1>
  </ng-template>
</clr-carousel>
```

--------------------------------

### Set Clarity Theme Attribute in HTML Body

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/README.md

Explains how to apply a Clarity theme (e.g., 'light') to the entire application by adding the `cds-theme` attribute to the `body` element in the main HTML file. This attribute can be dynamically toggled between 'light' and 'dark' to change the application's visual theme.

```HTML
<body cds-theme="light" />
```

--------------------------------

### Setting up Git for Clarity Project Contribution

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEVELOPMENT.md

This snippet provides the shell commands to clone a forked Clarity repository, navigate into it, configure Git user name and email for DCO signing, and set up the upstream remote to the main Clarity repository. These steps are essential for preparing your local environment to contribute.

```shell
## Clone your forked repository
git clone git@github.com:<github username>/ng-clarity.git

## Navigate to the directory
cd clarity

## Set name and e-mail configuration
git config user.name "John Doe"
git config user.email johndoe@example.com

## Setup the upstream remote
git remote add upstream https://github.com/vmware-clarity/ng-clarity.git
```

--------------------------------

### Displaying Clarity Navigation Items with Text

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/vertical-nav/nested-icon-menus/vertical-nav-nested-icon-menus.demo.html

This snippet demonstrates the structure for a navigation item within a Clarity nav group, displaying a label and a child item as plain text. It uses Angular template syntax for data binding and a JavaScript void(0) placeholder for the child item's link.

```Angular
{{item.label}} [{{childItem.label}}](javascript:void(0))
```

--------------------------------

### Detail Pane with Change Event Handling

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/detail/detail.html

Illustrates a detail pane setup that likely interacts with or responds to change events. The template structure remains consistent, focusing on displaying user and detail data, and pagination, suggesting that the underlying component might emit events on data changes or user interactions.

```HTML (Angular Template)
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}}

{{detail | json}}

{{detail | json}}

{{detail | json}}

{{detail | json}}

Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Clarity clrDate Directive Binding Examples

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datepicker/datepicker-date-input-explicit-wrapper.html

This snippet illustrates various ways to bind data with the `clrDate` directive in VMware Clarity for Angular. It covers one-way input binding for setting initial values, two-way data binding for interactive date selection, and displaying the current date value using Angular interpolation.

```HTML
[clrDate]
```

```HTML
[(clrDate)]
```

```HTML
{{date}}
```

--------------------------------

### Clone Clarity Repository and Configure Git

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DOCUMENTATION.md

This snippet provides a series of bash commands to clone a forked Clarity repository, navigate into the project directory, configure Git user name and email, set up an upstream remote, and check out a specific topic branch for development.

```bash
## Clone your forked repository
git clone git@github.com:<github username>/ng-clarity.git

## Navigate to the directory
cd clarity

## Set name and e-mail configuration
git config user.name "John Doe"
git config user.email johndoe@example.com

## Setup the upstream remote
git remote add upstream https://github.com/vmware-clarity/ng-clarity.git

## Check out the upstream a topic branch for your changes
git fetch
git checkout -b topic/feature-name upstream/topic/feature-name
```

--------------------------------

### Clarity Navigation Group with Text Parent and Link Child

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/vertical-nav/nested-menus/vertical-nav-nested-menus.demo.html

This snippet demonstrates how to display a navigation group where the parent item's label is rendered as plain text, and the child item's label is a clickable link. This pattern is useful for hierarchical navigation where only the deepest level is interactive, guiding users through categories before offering specific actions.

```Angular Template
{{item.label}} [{{childItem.label}}](javascript:void(0))
```

--------------------------------

### Git Commands for Rebasing and Force Pushing

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_FEATURES.md

Shows the Git commands used to interactively rebase a topic branch onto the main branch and then force push the changes to the remote repository after resolving conflicts.

```bash
$ git rebase -i main

# Rebase commits and resolve conflict, if any.

$ git push origin branch -f
```

--------------------------------

### GitHub Workflow: Manual Preview Generation for Clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/PUBLISHING.md

This workflow must be manually triggered to generate a preview of the release. It performs comprehensive checks similar to the build process and publishes a preview of the demo application.

```GitHub Workflow Description
- verify all lint rules pass
- verify the project builds
- verify all tests pass
- verify any changes to the public api have been accepted
- generate a preview of the release
- publish a preview of the demo app
```

--------------------------------

### Clone and Configure Git for ng-clarity Fork

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_BUG_FIXES.md

This snippet provides shell commands to clone your forked ng-clarity repository, navigate into its directory, configure your Git user name and email, and set up the upstream remote to track the main vmware-clarity repository.

```shell
## Clone your forked repository
git clone git@github.com:<github username>/ng-clarity.git

## Navigate to the directory
cd clarity

## Set name and e-mail configuration
git config user.name "John Doe"
git config user.email johndoe@example.com

## Setup the upstream remote
git remote add upstream https://github.com/vmware-clarity/ng-clarity.git
```

--------------------------------

### Example Datagrid Column Template with Angular Interpolation

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/filtering/filtering.html

An illustrative example of how data properties can be displayed within a Clarity Datagrid column using Angular's interpolation syntax. This snippet shows typical data binding for user details and a date pipe, often used in conjunction with custom filters.

```HTML
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{users.length}} users
```

--------------------------------

### Horizontal Scrolling for Wide Data (Angular Template)

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/scrolling/scrolling.html

This example demonstrates how to enable horizontal scrolling, particularly useful when displaying data with wide columns within a constrained container like a narrow card. It utilizes Angular template expressions to bind user data and includes a placeholder for a very wide column to simulate overflow scenarios.

```HTML (Angular)
User ID Name Pokemon Favorite color Filler {{user.id}} {{user.name}} {{user.pokemon.name}} This is a very wide column. {{users.length}} users
```

--------------------------------

### Datagrid Multi Row Selection

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Illustrates how to enable multiple row selection in a Datagrid, including example action buttons like Edit and Delete.

```HTML/Angular
User ID Name Creation date Favorite color Edit Delete {{user.id}} {{user.name}} {{user.creation | date}} {{nonPaginatedUsers.length}} users
```

--------------------------------

### GitHub Workflow: Manual Release Process for Clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/PUBLISHING.md

This critical workflow is manually triggered to handle the full public release of Clarity. It ensures all quality gates are met, tags the release, publishes to GitHub, npm, and updates the demo app.

```GitHub Workflow Description
- verify all lint rules pass
- verify the project builds
- verify all tests pass
- verify any changes to the public api have been accepted
- tag the latest commit with the new version number
- publish a GitHub release
- publish @clr/angular and @clr/ui packages to npm
- publish the demo app
```

--------------------------------

### Clarity Grid Layout: End Alignment

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/grid/alignment/horizontal/horizontal-alignment.html

Shows how to align grid items to the end of the container with Clarity CSS classes. This pushes the columns to the rightmost edge of their parent container.

```HTML
.clr-col-4
.clr-col-4
```

--------------------------------

### Clarity Project Directory Structure

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/BUILD.md

Outlines the top-level directory structure of the Clarity repository, distinguishing between Angular components, the demo application, and the standalone UI package.

```bash
projects

├── angular # All Angular Clarity components and styles (@clr/angular)

├── demo # A demo angular application

├── ui # Extracted global CSS (@clr/ui)

```

--------------------------------

### Clarity Headers: CSS Classes

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/layout/main-container/STYLES.md

Lists CSS classes specifically for styling header elements, including the main header, search fields, and responsive hamburger icon.

```APIDOC
clr-header: Application header element
clr-header > search: Header search field
header-hamburger-trigger: Hamburger icon for responsive header
header-actions: Responsive header actions
```

--------------------------------

### Basic Datagrid Structure

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Demonstrates the fundamental layout of a Clarity Datagrid with user ID, name, creation date, and favorite color.

```HTML/Angular
User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{nonPaginatedUsers.length}} users
```

--------------------------------

### Clarity Angular Component Code Style Guidelines

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CODING_GUIDELINES.md

This section outlines best practices for Angular component code style within the Clarity project, covering template organization, CSS styling, host bindings, host listeners, and method naming conventions.

```APIDOC
Template Location:
  - Inline: Use 'template' for a few lines.
  - External: Use 'templateUrl' for longer templates.

CSS Styling:
  - Use CSS classnames with components.
  - Avoid component tags in CSS selectors (e.g., 'clr-signpost').
  - Add 'host: { '[class.your-classname-here]': 'true' }' to component definition.
  - Use '.your-classname-here' in CSS.

Bindings:
  - Always true: Declare directly in 'host' option.
  - Others: Use '@HostBinding' annotation on property/getter.

Host Listeners:
  - Always use '@HostListener' annotation.

Method Naming:
  - Describe 'what' they do, not 'when' they trigger.
  - Avoid 'onClick()', 'onHover()', 'onFocus()', 'onScroll()'.
  - Example: 'toggleSelection()' instead of 'onClick()'.
```

--------------------------------

### Clarity Flex Item Alignment Class: clr-align-self-auto

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/layout/grid/STYLES.md

Sets the `align-self` property of a flex item to `auto`, allowing it to inherit its alignment from its parent container or default behavior. Other possible values include 'start', 'end', 'center', 'baseline', and 'stretch'.

```APIDOC
Class: clr-align-self-auto
Description: Sets align-self property of a column to 'auto'. Valid positions are 'auto', 'start', 'end', 'center', 'baseline', 'stretch'.
```

--------------------------------

### GitHub Workflow: Automated Build Process for Clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/PUBLISHING.md

This workflow automatically runs when a pull request is opened or updated. Its purpose is to ensure code quality, project integrity, and provide a preview of the demo application before merging.

```GitHub Workflow Description
- verify all lint rules pass
- verify the project builds
- verify all tests pass
- verify any changes to the public api have been accepted
- publish a preview of the demo app
```

--------------------------------

### Display Model Data in Modal (Angular Template)

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/modal/modal-form.demo.html

This Angular template snippet shows how to bind and display a 'model' object as JSON within a modal or a specific UI section. It's typically used for debugging or presenting raw data.

```Angular
Show modal Model Info: {{model | json}}
```

--------------------------------

### Clarity Layout: CSS Classes

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/layout/main-container/STYLES.md

Lists CSS classes for structuring the main application layout, including containers, alerts, headers, and navigation elements.

```APIDOC
main-container: Main application container element
alert-app-level: Application level alert slot
header: Application header
subnav, sub-nav: Secondary top navigation container
content-container: Main content and nav container
clr-vertical-nav: Left navigation container
content-area: Pag content container
```

--------------------------------

### Clarity DataGrid Row Data Interpolation

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/selection-row-mode/selection-row-mode.html

This snippet demonstrates how to display individual data points within a Clarity DataGrid row using Angular interpolation. It includes examples for user ID, name, and a formatted creation date using the `date` pipe.

```HTML
{{user.id}} {{user.name}} {{user.creation | date}}
```

--------------------------------

### Clarity File Input CSS Classes Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/forms/file-input/STYLES.md

Provides a reference for the CSS classes used to style and structure the file input element in VMware Clarity, including wrappers, native input, and various button elements.

```APIDOC
CSS Classes:
  clr-file-input-wrapper:
    Description: Wrapper for input element
  clr-file-input:
    Description: Native file input element
  clr-file-input-browse-button:
    Description: Browse button
  clr-file-input-browse-button-text:
    Description: Browse button text span
  clr-file-input-clear-button:
    Description: Clear files button
```

--------------------------------

### Clarity Popover Interfaces Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/utils/popover/README.md

Describes the data structures (interfaces) used for positioning and testing the visibility of popover content within the Clarity library.

```APIDOC
ClrPopoverContentOffset:
  Description: An object used to position content. It describes the number of pixels content needs to move from the origin (0,0) top left of the viewport along both the x and the y axis.

ClrPopoverPosition:
  Description: An object that describes the relationship between anchor to content positions. It eliminates invalid content positions and simplifies the math for handling viewport violations based on enum values.

ClrVisibilityCoords:
  Description: An object used to create a virtual position for content that can be tested for visibility violations without adding the content to the DOM.
```

--------------------------------

### Checkout a Topic Branch for Clarity Development

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEV_FEATURES.md

Provides shell commands to fetch and checkout a specific topic branch from the upstream repository, which is essential for developers working on large features or refactorings in the Clarity project.

```shell
## Check out the upstream a topic branch for your changes
git fetch
git checkout -b topic/feature-name upstream/topic/feature-name
```

--------------------------------

### Angular ngModel Two-Way Data Binding Example

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datepicker/ngmodel-auto-wrapped.html

This snippet demonstrates the use of `[(ngModel)]` for two-way data binding in an Angular template. It shows how a component's property (e.g., `model`) can be bound to an input element or a custom component that supports `ngModel`, and how its value can be displayed using interpolation.

```HTML
[(ngModel)]

{{model}}
```

--------------------------------

### Clarity Datagrid with Smart Column Sizing

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/kitchen-sink/kitchen-sink.html

Shows a Clarity datagrid with smart column sizing, adapting to long headers and large data content, demonstrating how columns adjust to fit text.

```Angular
This column as a long header but short data Short header Large data {{user.id}} {{user.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor tellus, tincidunt eget mauris molestie, ullamcorper facilisis lacus. Vivamus sagittis suscipit libero, et tristique justo consectetur eget. {{nonPaginatedUsers.length}} users
```

--------------------------------

### Binding Deep Model Properties in Clarity Datagrid

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/binding-properties/binding-properties.html

This example demonstrates how to bind a Clarity datagrid column to a deeply nested property within your model using standard dot-separated syntax. This enables built-in features like sorting and filtering to work automatically on the specified property.

```HTML
[clrDgField]=\"'my.deep.property'\"
```

--------------------------------

### ClrPopover Services API Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/utils/popover/README.md

This section outlines the core services that manage the functionality of ClrPopover, each responsible for a specific area: event handling, content positioning, and managing the popover's open/close state.

```APIDOC
ClrPopoverEventsService:
  Purpose: Events are created, added and removed in this service. Popover event listeners include escape keypresses, clicking, outside clicks and inside clicks (e.g clicks inside the popover content element).
ClrPopoverPositionService:
  Purpose: This service holds references to the anchor element, the content element and uses the popover-position operators to position the content, test it for visibility errors and intelligently change the position based on the errors found.
ClrPopoverToggleService:
  Purpose: manages the open/close state changes for the popover complex and can take into account the triggering event that started an open or close change.
```

--------------------------------

### Clarity Project Standard Commit Message Format

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/CONTRIBUTING_DEVELOPMENT.md

This section defines the required format for commit messages in the Clarity project. It specifies the structure including type, optional scope, description, optional body, optional GitHub closing reference, and the mandatory 'Signed-off-by' line. Valid types include 'feat', 'fix', and 'chore', with a comprehensive list of possible scopes.

```APIDOC
<type>(optional scope): <description>
 < BLANK LINE >

[optional body]
[optional Github closing reference]

 < BLANK LINE >
Signed-off-by: Your Name <your.email@example.com>

type: feat | fix | chore
scope: a11y | accordion | alert | badge | build | button | card | checkbox | datagrid | date-picker | dropdown | form | grid | header | icons | i18n | input | label | list | login | modal | password | progress-bar | radio | select | signpost | spinner | stack-view | stepper | table | tabs | textarea | timeline | toggle | tooltip | tree-view | vertical-nav | wizard
```

--------------------------------

### Datagrid Hide-Show Columns

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Demonstrates how to dynamically hide and show columns in a Datagrid, including a 'No users found' message.

```HTML/Angular
User ID Name Creation date Pokemon Favorite color No users found {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Display Single Selected DataGrid User Name

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/selection-row-mode/selection-row-mode.html

When single row selection is active, the selected item's properties can be displayed using Angular's interpolation syntax. This example shows how to bind and display the `name` property of the `singleSelected` object, which holds the currently selected row's data.

```HTML
Selected user: {{singleSelected.name}}
```

--------------------------------

### Datagrid with Smart Iterator, Property Binding, and Sorting

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Illustrates advanced Datagrid features including smart iteration, data binding, and sorting capabilities for user and Pokemon data.

```HTML/Angular
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{nonPaginatedUsers.length}} users
```

--------------------------------

### GitHub Workflow: PR Bot Commenting for Clarity

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/docs/PUBLISHING.md

This automated workflow runs whenever a pull request is opened or updated. Its primary function is to provide real-time feedback on the status of the `build` workflow directly within the pull request.

```GitHub Workflow Description
- comment on a PR whenever a `build` workflow is started or completed
```

--------------------------------

### Recommended String Binding for Clarity Datagrid Field

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/binding-properties/binding-properties.html

This example demonstrates the recommended syntax for hard-coding a string value to the `[clrDgField]` input. The double quoting `"'name'"` ensures that the value is treated as a string property binding, which is crucial for proper Angular change detection and attribute management.

```HTML
[clrDgField]=\"'name'\"
```

--------------------------------

### Clarity Headers: CSS Custom Properties

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/layout/main-container/STYLES.md

Provides a comprehensive list of CSS custom properties for customizing the appearance and behavior of application headers, including height, background, divider, font colors, and search field styling.

```APIDOC
--clr-header-height: Header overall height
--clr-header-bg-color: Header background color
--clr-header-divider-color: Color of the header divider
--clr-header-divider-opacity: Opacity of the header divider
--clr-header-nav-opacity: Header nav item opacity
--clr-header-nav-hover-opacity: Header nav item opacity on hover
--clr-header-2-bg-color: Second version of header background color
--clr-header-3-bg-color: Third version of header background color
--clr-header-4-bg-color: Fourth version of header background color
--clr-header-5-bg-color: Fifth version of header background color
--clr-header-6-bg-color: Sixth version of header background color
--clr-header-7-bg-color: Seventh version of header background color
--clr-header-8-bg-color: Eighth version of header background color
--clr-header-font-color: Header text color
--clr-header-font-color-hover: Header hovered item color
--clr-header-title-color: Header branding title text color
--clr-header-title-font-weight: Header branding title text fort weight
--clr-header-title-font-family: Header branding title font family
--clr-header-nav-link-line-height: Header navigation buttons line-height
--clr-header-nav-link-font-size: Header navigation buttons font size
--clr-header-search-icon-size: Header search icon size
--clr-header-search-margin-left: Header search field left margin
--clr-header-search-margin-right: Header search field right margin
--clr-header-search-gap: Gap between the subelements of the header search field
--clr-header-search-input-font-color: Header search field text color
--clr-header-search-border-active: Border of active/focused search field
--clr-header-search-border-hover: Border of hovered search field
--clr-header-search-placeholder-text-color: Text color of the header search placeholder
```

--------------------------------

### Clarity Datagrid with Smart Iterator, Property Binding, and Sorting

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/kitchen-sink/kitchen-sink.html

Illustrates a Clarity datagrid utilizing smart iterators, property binding for user details including Pokemon name, and controls for ascending, descending, and clearing sort order.

```Angular
Sort ascendingly Sort descendingly Clear sort

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{nonPaginatedUsers.length}} users
```

--------------------------------

### Vertical Scrolling for User Data (Angular Template)

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/scrolling/scrolling.html

This snippet illustrates how to display user data in a vertically scrollable layout, typically a table or list. It uses Angular template expressions to bind data properties like `user.id`, `user.name`, `user.pokemon.name`, and applies a `date` pipe to `user.creation`. It also shows a total count of users.

```HTML (Angular)
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{users.length}} users
```

--------------------------------

### Clarity Navigation Group with Link Parent and Link Child

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/vertical-nav/nested-menus/vertical-nav-nested-menus.demo.html

This snippet illustrates a navigation group where both the parent and child items are rendered as clickable links. This provides full interactivity at all levels of the navigation hierarchy, allowing users to navigate from any point. It's suitable for flat or deeply nested structures where every item is a direct navigation target.

```Angular Template
[{{item.label}}](javascript://) [{{childItem.label}}](javascript:void(0))
```

--------------------------------

### Clarity Layout: CSS Custom Properties

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/layout/main-container/STYLES.md

Defines CSS custom properties available for global application layout customization, such as the background color.

```APIDOC
--clr-global-app-background: Global application background color
```

--------------------------------

### Displaying Detail Pane Data with Simple API

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/detail/detail.html

Demonstrates a basic detail pane displaying user and detail information using Angular template expressions and pipes. It shows how to render user properties, apply date formatting, and display raw JSON data for debugging or inspection. Pagination information is also shown, implying a simple data retrieval and display mechanism.

```HTML (Angular Template)
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}} {{detail.name}}

{{detail | json}}

{{detail | json}}

{{detail | json}}

{{detail | json}}

Users per page {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Displaying Selected Items in Clarity Datagrid

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/selection/selection.html

This snippet illustrates how to display properties of selected items in an Angular template after configuring row selection in a Clarity datagrid. The `[clrDgItem]` input on `<clr-dg-row>` identifies the selected model, and the `[(clrDgSelected)]` binding on the datagrid provides access to the array of selected items. The examples show how to iterate through selected users and display their details, as well as pagination information.

```Angular
Selected users: _No user selected._ {{user.name}}

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{total}} users
```

--------------------------------

### Adding a Custom Placeholder to Clarity Datagrid

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/placeholder/placeholder.html

To display a custom message when a Clarity datagrid is empty, add the `<clr-dg-placeholder>` element directly within the `<clr-datagrid>` component, typically next to your row definitions. The content inside this tag will be shown when no rows are present, allowing for dynamic messages like 'We couldn't find any users!' or 'Fetching data...'. This example demonstrates a common usage pattern within an Angular template.

```Angular
<clr-datagrid>
  <clr-dg-column>User ID</clr-dg-column>
  <clr-dg-column>Name</clr-dg-column>
  <clr-dg-column>Creation date</clr-dg-column>
  <clr-dg-column>Favorite color</clr-dg-column>

  <!-- Placeholder element displayed when no rows are available -->
  <clr-dg-placeholder>
    We couldn't find any users! {{users.length}} users
  </clr-dg-placeholder>

  <!-- Other datagrid elements like rows and pagination would go here -->
</clr-datagrid>
```

--------------------------------

### Datagrid with Filters and Pagination

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/compact/compact.html

Shows how to implement filtering and pagination for large datasets in a Datagrid, displaying current page range and total items.

```HTML/Angular
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Clarity CSS Label Classes Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/emphasis/STYLES.md

Defines various CSS classes for labels in VMware Clarity, including a default label, color-specific labels, a clickable label, and a class for inner text styling. These classes are fundamental for consistent UI presentation.

```APIDOC
Class: label
  Description: Default label class

Class: label-<color>
  Description: Label class with specific color

Class: clickable
  Description: Clickable label class

Class: text
  Description: Inner text class for the label
```

--------------------------------

### Clarity Datagrid with Filters and Pagination

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/datagrid/kitchen-sink/kitchen-sink.html

Shows a Clarity datagrid implementing filtering and pagination capabilities, displaying user information and current pagination status.

```Angular
User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
```

--------------------------------

### Clarity Card CSS Class Reference

Source: https://github.com/vmware-clarity/ng-clarity/blob/main/projects/demo/src/app/card/card-old.html

Detailed documentation for the core CSS classes used to build and style Clarity cards, including their purpose and usage guidelines.

```APIDOC
.card:
  Description: Required wrapper to contain all card elements.
```

```APIDOC
.card-block:
  Description: Wrapper to group .card-title, .card-text, and .card-link elements. Can also contain Clarity Buttons. Can extend .card if no content outside .card-block.
```

```APIDOC
.card-header:
  Description: Adds an optional header to the card.
```

```APIDOC
.card-title, .card-text, .card-link:
  Description: Helper classes to organize content within cards. .card-link should be extended on all links or use a Clarity button.
```

```APIDOC
.card-divider:
  Description: Creates a simple divider to separate sections inside the card when assigned to any block element.
```

```APIDOC
.card-overflow-menu:
  Description: Wrapper for the overflow menu. Contains a .card-link (toggle) followed by .menu. Activated by attaching .active class.
```

```APIDOC
.menu, .menu-item:
  Description: .menu should follow a .card-link inside a .card-overflow-menu. All menu items should have the .menu-item class.
```

```APIDOC
.clickable:
  Description: Changes cursor to pointer and adds a raised hover effect when extended with .card, making the card appear clickable.
```

```APIDOC
.group, .icon, .title, .description:
  Description: .group is a wrapper for an image icon, title, and description. Assign .icon, .title, and .description respectively to these elements.
```

```APIDOC
.wrap:
  Description: Renders the group vertically instead of horizontally.
```

```APIDOC
.list-group:
  Description: Allows using a Bootstrap .list-group inside the card. Each list element should extend .list-group-item.
```