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 });
or
this.ngMatAlertService.confirm(options).subscribe(result => { //result is true | false | undefined; });
or
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