The <pxb-channel-value> component is used to display a channel value (and units). This component abstracts the styles used to display the channel and units as well as an optional inline icon. These are used as part of the <pxb-hero> component, but can also be used inline (e.g., in a list).
Icons are passed in as a child element of the <pxb-channel-value> component.
// app.module.ts
import { ChannelValueModule } from '@pxblue/angular-components';
...
imports: [
ChannelValueModule
],// your-component.html
<pxb-channel-value class="content" value="65" units="%" [prefix]="true">
<mat-icon>trending_up</mat-icon>
</pxb-channel-value>Parent element (<pxb-channel-value>) attributes:
| @Input | Description | Type | Required | Default |
|---|---|---|---|---|
| prefix | If true, shows units before the value | boolean |
no | false |
| units | Text to display for the units | string |
no | |
| unitSpace | Show/Hide spacing between the value and units | 'auto' | 'hide' | 'show' |
yes | 'auto' |
| value | Text to display for the value | string | number |
yes |
The following child element is projected into <pxb-channel-value>:
| Selector | Description | Required | Default |
|---|---|---|---|
| (child) | Icons shown on the left | no |
Each PX Blue component has classes which can be used to override component styles:
| Name | Description |
|---|---|
| pxb-channel-value | Styles applied to the tag |
| pxb-channel-value-content | Styles applied to the root element |
| pxb-channel-value-icon-wrapper | Styles applied to the icon container |
| pxb-channel-value-units | Styles applied to the units @Input |
| pxb-channel-value-value | Styles applied to the value @Input |