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`

$9000 (40.9% )

Widget Title

### 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` | - |