On this page

Angular Widgets

Angular widget components give information about the app statistics.

See: how to import requiredCoreUI Icons

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

$9000 (40.9%)

Widget Title

Action One Action Two Action Three

### Widget Stats B

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

### Widget Stats D

### Widget Stats E

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

--- ## API reference ### Widgets Module

```typescriptimport { 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` | - |

Movatterモバイル変換

Angular Widgets