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