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.