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:

ng new my-angular-project

So, inside your Angular application directory:

cd /.../my-angular-project

install library

use your preferred import method:

NPM:

npm i --save ng-mat-interactions-dialog

YARN:

yarn ng-mat-interactions-dialog

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

install angular material

npm install --save @angular/material @angular/cdk @angular/animations

import browser animations module ( in app module or)

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

@NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }

the library imports the material component modules it needs already, as long as you have them installed
import a theme example:
```
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
```
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
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:

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import "assets/styles/material/material-theme.scss";

Usage

Parent Module:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgMatInteractionsDialogModule} from 'ng-mat-interactions-dialog';
...
imports: [
...
  NgMatInteractionsDialogModule,
  BrowserAnimationsModule
...
],

Component or Service:

import { DialogData, NgMatInteractionsDialogService } from 'ng-mat-interactions-dialog';
...
constructor(
  private ngMatAlertService: NgMatInteractionsDialogService,
){}
...

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

  this.ngMatAlertService.alert(options).subscribe(result => {
    //result is undefined
  });

  this.ngMatAlertService.confirm(options).subscribe(result => {
    //result is true | false | undefined;
  });

  this.ngMatAlertService.prompt(options).subscribe(result => {
    //result is input value or undefined
  });

options: DialogData

{
  title?: string; //mat-dialog-title text
  message?: string; //mat-dialog-content text
  template?: ElementRef //template passed to modal, placed below any message string
  cancelButton?: string; //default 'Cancel' used for confirm and prompt cancel button
  alertButton?: string; //default 'OK' used for alert 'OK' button
  confirmButton?: string; // default 'OK' used for confirm true button
  promptButton?: string; //default 'OK' used for prompt send button
}

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:

import {
  ...
  ViewChild,
  ElementRef
} from '@angular/core';
import { DialogData, NgMatInteractionsDialogService } from 'ng-mat-interactions-dialog';
...
@ViewChild('myAlertContentTemplate') alertTemplateRef: ElementRef;
constructor(
  ...
  private ngMatAlertService: NgMatInteractionsDialogService
){}
...
myAlertMethod(){
  this.ngMatAlertService.alert({
    template: this.alertTemplateRef,
    ...
  }).subscribe(result => {
    //whatever you want to do when dialog closes
  })
}
...

Development

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

git clone https://github.com/t0johnso/ng-mat-interactions-dialog.git

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

ng serve ng-mat-tester

Test library

ng test ng-mat-interactions-dialog

Test consumer application:

ng test ng-mat-tester

Build and Serve:

npm run package

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

Package detail