Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Widgets

Angular widget components give information about the app statistics.

See: how to import required CoreUI Icons

## Examples ### Widget Stats A Create custom Widget variants with `cTemplateId`: - `widgetValueTemplate` - `widgetActionTemplate` - `widgetChartTemplate`

### Widget Stats B

### Widget Stats C - `widgetIconTemplate` - `widgetProgressTemplate`

### Widget Stats D

### Widget Stats E

### Widget Stats F - `widgetIconTemplate` - `widgetFooterTemplate`

--- ## API reference ### Widgets Module ```typescript import { DropdownModule, ProgressModule, SharedModule, WidgetsModule } from '@coreui/angular'; import { IconModule } from '@coreui/icons-angular'; import { ChartjsModule } from '@coreui/angular-chartjs'; @NgModule({ imports: [ DropdownModule, ProgressModule, SharedModule, WidgetsModule, IconModule, ChartjsModule ] }) export class AppModule() { } ``` ### c-widget-stat-a _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the color context of the component to one of CoreUI’s themed colors. | `Color` | - | | `title` | Title of the widget to display | `string` | - | | `value` | Value for your widget to display | `string` | - |

### c-widget-stat-b _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the color context of the component to one of CoreUI themed colors | `Color` | - | | `textColor` | Sets the text-color context of the component to one of CoreUI themed colors | `Color \| 'white' \| 'muted'` | - | | `title` | Title of the widget to display | `string` | - | | `text` | Helper text for your widget | `string` | - | | `value` | Value for your widget to display | `string` | - | | `inverse` | Invert colors from their default dark shade | `boolean` | - |

### c-widget-stat-c _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `title` | Title of the widget to display | `string` | - | | `value` | Value for your widget to display | `string` | - | | `inverse` | Invert colors from their default dark shade | `boolean` | - |

### c-widget-stat-d _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the color context of the component to one of CoreUI themed colors | `Color` | - | | `values` | Value for your widget to display | `{ title?: string, value?: number \| string }` | - |

### c-widget-stat-e _component_ ##### Inputs

### c-widget-stat-f _component_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the color context of the component to one of CoreUI themed colors | `Color` | - | | `textColor` | Sets the text-color context of the component to one of CoreUI themed colors | `Color \| 'white' \| 'muted'` | - | | `title` | Title of the widget to display | `string` | - | | `value` | Value for your widget to display | `string` | - | | `footer` | Footer for your widget | `string` | - | | `padding` | Set padding of the icon | `boolean` | - |