Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    npm version Build Status

    Angular Groundhog

    Available features & Status

    Feature Status Version Docs Issue/PR
    Button Finished >= 0.1.0 Docs -
    Form field Finished >= 0.1.0 Docs -
    Icon Finished >= 0.1.0 Docs -
    Input Finished >= 0.1.0 Docs -
    Island Finished >= 0.2.0 Docs -
    Progress circle Finished >= 0.1.0 Docs -
    Select Finished >= 0.1.0 Docs -
    Tile Finished >= 0.1.0 Docs -
    Theming Finished >= 0.2.0 Docs -
    Context menu Finished >= 0.2.0 Docs -
    Radio button Finished >= 0.3.0 Docs -
    Loading distractor Finished >= 0.4.0 Docs -
    Expandable In-progress - - #47
    Checkbox In-progress - - #12 / #53
    Datepicker In-progress - - #49 / #34

    Getting started

    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

    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    export class AppModule { }

    If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

    import {NoopAnimationsModule} from '@dynatrace/ngx-groundhog';
    export class AppModule { }

    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:

    import {GhButtonModule, GhSelectModule} from '@angular/material';
      imports[GhButtonModule, GhSelectModule],
    export class PizzaPartyAppModule { }

    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 styles.css.

    @import "~@dynatrace/ngx-groundhog/themes/turquoise.css";

    If you want to use more themes in your app, import ~@dynatrace/ngx-groundhog/themes/all.css instead-



    1. Make sure node.js (Version 8 or greater) is installed
    2. Run npm install to install all dependencies

    Start Demo-App

    Run 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.


    Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

    Creating a new component

    We created a schematic inside a the ngx-groundhog-devkit repository to make it more convenient to create new components. Please see the readme for the command.


    npm i @dynatrace/ngx-groundhog

    DownloadsWeekly Downloads






    Unpacked Size

    3.9 MB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar