A dynamic modal component with modal data injection for Angular 4 - 13. (https://github.com/R3purg/ngx-advanced-modals)

NgxAdvancedModals

Table of contents

• Features
• Installation
• Usage
• Available ModalItem Options
  • Using ModalItem options
• Versioning
• Creator
  • Martynas Dambrauskas
• License

Features

• Dynamic NgxAdvancedModalsComponent
• Configurable option through ModalItem
• Custom style support with ::ng-deep
• Dynamic modal forms, buttons and text
• Inject your wanted ModalItem into NgxAdvancedModals and get your desired results

Installation

ngx-advanced-modals is available via npm

Using npm:

$ npm install ngx-advanced-modals --save

Using angular-cli:

$ ng add ngx-advanced-modals

Usage

1. Import NgxAdvancedModalsModule in the root module(AppModule):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxAdvancedModalsModule } from 'ngx-advanced-modals';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxAdvancedModalsModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Create 3 variables wherever you want to use the package:

dialogRef: MatDialogRef<NgxAdvancedModalsComponent, ModalItem> | undefined;
modalSettingItem: ModalSettingItems;
modalItem: ModalConfig;

3. In your component, where you created the 3 previous variables, give those variables a declaration:

this.modalSettingItem = new ModalSettingItems();
this.modalItem = new ModalConfig(this.modalSettingItem._baseModalData);

4. ModalSettingItems accepts object of type ModalItem:

Title: string;
Description: string;
Input: string;
Buttons: DialogButtons[];
Output: any;
OnClick: Function;
FormGroup: DialogForm[];

5. Finally, you can call the dialog using the base MatDialog options:

this.dialogRef = this.dialog.open(NgxAdvancedModalsComponent, this.modalItem);

Now use in your template:

<ngx-advanced-modals></ngx-advanced-modals>

Available ModalItem options

• [Title]: Title of the modal. Default value What is yout name?.
• [Description]: Description of the modal. Default value is empty string.
• [Input]: This variable will be set on form input, leave empty string or declare if you want to use a default input value.
• [Buttons]: An array of DialogButtons, which will be displayed in the dialog. Default are Confirm and Cancel buttons.
• [Output]: The output value of the dialog. Default value is null. When the dialog is closed, Input data is assigned to it.
• [OnClick]: Function that alters output data. Default function is (output: any) => { return output; }.
• [FormGroup]: An array of DialogForm objects. Here you declare eveyr form, that will be displayed in the modal. Default object is

[
    new DialogForm(
        new FormControl(
            '',
            Validators.required
        ),
        'Input',
        'text',
        2,
        16
    )
]

Using ModalItem options

new ModalItem(
    'What is your name?',
    '',
    '',
    [
        new DialogButtons(
            'Confirm',
            '',
            true
        ),
        new DialogButtons(
            'Cancel',
            '',
            false
        )
    ],
    null,
    (output: any) => { return output;},
    [
        new DialogForm(
            new FormControl(
                '',
                Validators.required
            ),
            'Input',
            'text',
            2,
            16
        )
    ],
);

Versioning

ngx-advanced-modals will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Martynas Dambrauskas

• @GitHub

License

ngx-advanced-modals is MIT licensed.