NgMatInteractionsDialog

Description:

Create modal dialogs for Alert, Prompt, and Confirm using Angular Material Dialogs by simply calling the service method ( no need to create your own templates manage styles etc).Use default templates or optionally pass a title, message text, button text, an/or a template reference. This is an Angular component/service module library requiring an Angular application. This was generated and tested in Angular CLI version 7.2.0.

Get Started:

Requires an existing Angular application or create one:

So, inside your Angular application directory:

install library

use your preferred import method:

NPM:

YARN:

install peer dependencies as needed:

Angular Material

Aside from core Angular modules for any new angular project ( @angular/core, @angular/common, @angular/forms ), this library has also peer dependencies for Angular Material (https://material.angular.io/guide/getting-started) Follow get started steps 1-2, 4: install npm modules, import animations module, include a theme.

...from https://material.angular.io/guide/getting-started

1. install angular material

2. import browser animations module ( in app module or)

3. the library imports the material component modules it needs already, as long as you have them installed
4. import a theme example:

in the test version I use the theme builder with some custom overrides: projects/ng-mat-tester/src/assets/styles/material/material-theme.scss projects/ng-mat-tester/src/assets/styles/material/material-overrides.scss 5. Gesture (hammer.js) support is not necessarily required for this library. This project uses Angular Material's MatButton, MatDialog, and MatInput component modules.

in projects/ng-mat-tester/src/styles.scss:

Usage

Parent Module:

Component or Service:

then (same component/service): alert(), confirm(), and prompt() service methods return an observable for that dialog's close event

or

or

options: DialogData

To use the template feature, pass a template reference from the relevant component: ElementRef;

in component.html:

  <ng-template #myAlertContentTemplate>
    <ul>
      <li>Step One</li>
      <li>Step Two</li>
      <li>Step Three</li>
    </ul>
  </ng-template>

in component.ts:

Development

The Development repo is available @ https://github.com/t0johnso/ng-mat-interactions-dialog

projects > ng-mat-interactions-dialog is the actual library projects > ng-mat-tester is a test environment you can use to test locally before repackaging;

Serve

See a sample app running the build

Test library

Test consumer application:

Build and Serve:

This will, build the library, packaged as dist/ng-mat-interactions-dialog/ng-mat-interactions-dialog-version#.tgz, and serve the test application (on localhost:4200).

Test your package

You'll want to serve up a new app and test importing you new version of the package Todd Palmer wrote a great article on this for Angular-In-Depth, Bookmarked that section of the article here: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121#1cb3