Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
On this page

Angular Widgets

Angular widget components give information about the app statistics.

Loading...
See: how to import required CoreUI Icons ## Examples ### Widget Stats A Create custom Widget variants with `cTemplateId`: - `widgetValueTemplate` - `widgetActionTemplate` - `widgetChartTemplate`
Loading...
Loading...
Loading...
### Widget Stats B
Loading...
Loading...
Loading...
### Widget Stats C - `widgetIconTemplate` - `widgetProgressTemplate`
Loading...
Loading...
Loading...
### Widget Stats D
Loading...
Loading...
Loading...
### Widget Stats E
Loading...
Loading...
Loading...
### Widget Stats F - `widgetIconTemplate` - `widgetFooterTemplate`
Loading...
Loading...
Loading...
--- ## 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
| name | description | type | default | | ---- | ----------- | ---- | ------- | | `title` | Title of the widget to display | `string` | - | | `value` | Value for your widget to display | `string` | - |
### 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` | - |
  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.4.12 Code licensed MIT , docs CC BY 3.0 .
CoreUI PRO requires a commercial license.