Mat Dialog Angular Schematic

Generate Angular Material Dialogs in an Angular CLI project

This schematic will:

• install @angular/material if not already installed
• generate a component from which the dialog is launched, as well as the dialog component itself
• handle the declaration, export, and entryComponent requirements for the 2 components
• import the MatButton, MatDialog, and BrowserAnimations modules if not already installed

Usage 🚀

Install globally

npm install -g @briebug/mat-dialog-schematic

Then in an Angular CLI project run

ng g @briebug/mat-dialog-schematic:mat-dialog {name}

Issues

Issues with this schematic can be filed here.

Development 🛠

Getting started

⚙ Yarn is required for the scripts. Make sure it's installed on your machine.

⬇ Install the dependencies for the schematic and the sandbox application

yarn && cd sandbox && yarn && cd ..

🖇 Link the schematic in the sandbox to run locally

yarn link:schematic

🏃 Run the schematic

yarn build:clean:launch

To execute an example schematic, make sure you've ran the Install and Link steps above. Then run the following and inspect the changed files.

git checkout component-license && yarn build:clean:launch

E2E testing

Execute the schematic against the sandbox. Then run linting, unit & e2e tests and a prod build in the sandbox.

yarn test

Unit Testing

Run the unit tests using Jasmine as a runner and test framework.

yarn test:unit

Reset the sandbox

Running the schematic locally makes file system changes. The sandbox is version controlled so that viewing a diff of the changes is trivial. After the schematic has run locally, reset the sandbox with the following.

yarn clean

Note: if you're using the schematics CLI mentioned below, you can execute the schematic in a dry run mode.

Change the Schematic name

1. do a global search and replace for schematic-starter and schematicStarter with the new name.
2. change the folder name from ./src/schematic-starter/... to ./src/NEW_NAME/...
3. run yarn link:schematic to set up local package linking for the sandbox

Optional - Testing with the Schematics CLI

To test locally, install @angular-devkit/schematics-cli globally and use the schematics command line tool. That tool acts the same as the generate command of the Angular CLI but also has a debug mode.

Check the documentation with

schematics --help

Publishing

To publish, simply do:

npm run build
npm publish