Ngx-advanced-modals NPM

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

NgxAdvancedModals

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

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 { }

Create 3 variables wherever you want to use the package:

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

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);

ModalSettingItems accepts object of type ModalItem:

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

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
		)
	],
);