canopy-data-point

To display labelled data values in Angular, use the Canopy lg-data-point component composed with lg-data-point-label and lg-data-point-value elements to render accessible key-value pairs. This enforces consistent Canopy design and accessibility standards across enterprise UIs.

Ensuring accessibility for data point labels requires setting a mandatory headingLevel on the lg-data-point-label component. This configures the Canopy UI component to align with enterprise accessibility standards for key-value data rendering.

Yes, you can use the Canopy data point component to render summary data lists by composing multiple lg-data-point elements within an lg-data-point-list component. This structures key-value pairs consistently across enterprise Angular applications.

Yes, building a Canopy data point requires using LgDataPointComponent alongside LgDataPointLabelComponent and LgDataPointValueComponent. This composition enforces proper structure and accessibility constraints for displaying labelled data values.

The Canopy data point label requires a headingLevel constraint to enforce semantic HTML structure and meet accessibility standards. This ensures screen readers correctly interpret the relationship between labels and values in key-value pairs.

Limitations include strict composition requirements where labels must use LgDataPointLabelComponent with a mandated headingLevel, and values must use LgDataPointValueComponent. Deviating from this structure breaks Canopy design and accessibility alignment.