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
or    
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
or    
yarn add @angular/animations

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

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
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';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
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';

@NgModule({
  ...
  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-

Development

Prerequisite

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.

Build

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.