@dynatrace/ngx-groundhog-devkit

DevKit for the ngx-groundhog

Usage no npm install needed!

<script type="module">
  import dynatraceNgxGroundhogDevkit from 'https://cdn.skypack.dev/@dynatrace/ngx-groundhog-devkit';
</script>

README

Angular Groundhog DevKit

Generating a new component in your ngx-groundhog lib project

You can use the ng generate (or just ng g) command to generate ngx-groundhog components:

ng generate groundhog-component my-new-component --collection @dynatrace/ngx-groundhog-devkit 
ng g ghc my-new-component --collection @dynatrace/ngx-groundhog-devkit # using the alias

You can find all possible blueprints in the table below:

Scaffold Usage
Component ng g groundhog-component my-new-component

Angular Groundhog - component

You can run the groundhog-component schematic with the following command inside the ngx-groundhog project

ng generate groundhog-component my-new-component --collection @dynatrace/ngx-groundhog-devkit 
ng g ghc my-new-component --collection @dynatrace/ngx-groundhog-devkit # using the alias

This will generate the following for you

  1. Add a folder inside src/lib with my-new-component as it's name and add the following files
    1. my-new-component-module.ts containing the NgModule definition with the exports and declarations
    2. my-new-component.ts containing your components definition
    3. my-new-component.html
    4. my-new-component.scss
    5. index.ts with the export for the public-api
    6. public-api.ts with the export for the module and the component
    7. tsconfig-build.json with the correct flatModuleId set
  2. Add a folder inside the src/demo-app with my-new-component as it's name and add the following files
    1. my-new-component-demo.ts containing the Demo component that display your component inside the demo app
    2. my-new-component-demo.html
    3. my-new-component-demo.scss
  3. Adds an export to the public-api.ts in the library root
  4. Adds the necessary declarations for the new component in the demo-groundhog-module.ts file
  5. Adds the demo declarations to routes.ts for the new component
  6. Adds a new navItem to the navItems collection in demo-app.ts to show the new component in the navItems
  7. Adds declarations to the demo-app-module.ts
  8. Adds mappings to the system-config.ts file