AngularDynamicDialog

Angular-dynamic-dialog is a library for building dynamic dialog, here you can embed a component to render the dialog's content. Customizing to your liking

Demo

https://gecoreto.github.io/angular-dynamic-dialog/

Install

$ npm i angular-dynamic-dialog

Import the module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GecoDialogModule } from 'angular-dynamic-dialog'; // <-- import the module
import { MyDynamicContentComponent } from './myDynamicContent.component';
import { AppComponent } from './app.component';
 
@NgModule({
    imports: [
              BrowserModule,
              GecoDialogModule // <-- include it in your app module
             ],
    declarations: [MyDynamicCotentComponent],  
    bootstrap: [MyComponent],
    entryComponents: [MyDynamicCotentComponent] // <-- include it for your dynamic content
})
export class MyAppModule {}

Usage

Render the html of your component that will be the content of the modal

Content html of DynamicCotentExampleComponent

<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="close" (click)="dialogRef.closeModal()" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-secondary" (click)="dialogRef.closeModal()">Close</button>
</div>

Opening the modal

import { GecoDialog } from 'angular-dynamic-dialog'; // <-- import the dynamic dialog
 
public constructor(private modal: GecoDialog) {
}
 
//The first parameter is the component to be rendered in the modal's content
//The second parameter is the modal's configuration
let modal = this.modal.openDialog(DynamicCotentExampleComponent, {
  //Inject data
  data: { name: 'David' },
  //Options: 'bootstrap', 'none'
  useStyles: 'none' 
});
//Event when closing the modal
modal.onClosedModal().subscribe(() => {
  alert('Closed modal!!!');
});
//Event when opening the modal
modal.onOpenModal().subscribe(null, null, () => {
  alert('open modal');
});

Options openDialog()

The parameters are optional

Available Options

Parameter	Type	Explanation
data	{}	set the data for the inject in your dynamic content
useStyles	string	set the style for use in the modal. Can either be 'bootstrap' or 'none'

Use the styles

If you use Bootstrap 4

let modal = this.modal.openDialog(DynamicCotentExampleComponent, {
  //Options: 'bootstrap', 'none'
  useStyles: 'bootstrap' 
});

otherwise, just use the default styles:

let modal = this.modal.openDialog(DynamicCotentExampleComponent, {
  //Options: 'bootstrap', 'none'
  useStyles: 'none' 
});

Styling

All the elements have specific css classes, please just look them up using the element inspector.

Receiving data in your dynamic content

Inject the data into your constructor

import { 
    GECO_DATA_DIALOG, 
    GecoDialog, 
    GECO_DIALOG_REF, 
    GecoDialogRef } from 'angular-dynamic-dialog'; // <-- import the components
    
  constructor(
  @Inject(GECO_DATA_DIALOG) public data: any,
  @Inject(GECO_DIALOG_REF) public dialogRef: GecoDialogRef
) { 
  console.log('Data =>', this.data);
  console.log('dialogRef =>', this.dialogRef);
}

Emitting action from the dynamic component

Close dialog from your component

<button type="button" (click)="dialogRef.closeModal()">Close Modal</button>

Contribute

If you want to help me in the development of this project do not hesitate, you have all the script available to you.

Suggestions

• [e-mail]
• @stylegeco