Available features & Status
|Form field||Finished||>= 0.1.0||Docs||-|
|Progress circle||Finished||>= 0.1.0||Docs||-|
|Context menu||Finished||>= 0.2.0||Docs||-|
|Radio button||Finished||>= 0.3.0||Docs||-|
|Loading distractor||Finished||>= 0.4.0||Docs||-|
|Checkbox||In-progress||-||-||#12 / #53|
|Datepicker||In-progress||-||-||#49 / #34|
Step 1: Install the ngx-groundhog and Angular CDK
npm install --save @dynatrace/ngx-groundhog @angular/cdk
yarn add @dynatrace/ngx-groundhog @angular/cdk
Step 2: Animations
Some ngx-groundhog components depend on the Angular animations module.
If you want these animations to work in your app, you have to install the
@angular/animations module and include the
BrowserAnimationsModule in your app.
npm install --save @angular/animations
yarn add @angular/animations
If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.
Note: @angular/animations uses the WebAnimation API that isn't supported by all browsers yet. If you want to support animations in these browsers, you'll have to include a polyfill.
Step 3: Import the component modules
Import the NgModule for each component you want to use:
Alternatively, you can create a separate NgModule that imports all of the ngx-groundhog components that you will use in your application. You can then include this module wherever you'd like to use the components.
Note: Whichever approach you use, be sure to import the ngx-groundhog modules after Angular's BrowserModule, as the import order matters for NgModules.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
ngx-groundhog is shipping with multiple themes. Include the one that you are using in your global
If you want to use more themes in your app, import
- Make sure node.js (Version 8 or greater) is installed
npm installto install all dependencies
npm run demo-app to start the demo-app on a local dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
npm run build to build the project. The build artifacts will be stored in the dist/ directory.