@neoprospecta/angular-dialog

Angular Dialog for Angular 2+

A service to easily create custom dialogs.

How to install:

Have two ways to install angular-dialog:

• First way:

  • Install dependence directly from NPM, running this command on terminal in the project's root folder.

    npm install @neoprospecta/angular-dialog --save

• Second way:

  • Declare angular-dialog as dependence into package.json file.

    "@neoprospecta/angular-dialog":"^4.0.0"

  • Install dependence, running this command on terminal in the project's root folder.

    npm install

How to use:

• Import DialogModule in the project's root module.

import { DialogModule } from '@neoprospecta/angular-dialog';

@NgModule({
    ...
  imports: [
    DialogModule
  ],
    ...
})
export class AppModule { }

• Import DialogService in project's component that needs to use.

import { DialogService } from '@neoprospecta/angular-dialog';

@Component(...)
export class AppComponent {
    ...
  constructor(
    private dialogService: DialogService
  ){ }
  ...
}

• Into same component create a function to open the dialog from DOM, for example openDialog().
• Create new array of DialogAction and push the actions with their onClick() functions that want to have in dialog respectively.
• Create new Dialog with the previous actions.
• Call function open() from DialogService passing by parameter the Dialog previously created.

import { DialogAction } from '@neoprospecta/angular-dialog';
import { Dialog } from '@neoprospecta/angular-dialog';
    ...
    myFunction() {
        console.log('Button cliked!');
    }
    
    openDialog() {
        let dialogActions: DialogAction[] = new Array<DialogAction>();
        
        dialogActions.push(
          {
            name: 'Action Name', 
            onClick: () => this.myFunction(), 
            color: 'primary', 
            position: 'right', 
            closeDialogAfterClick: true
          });
    
        let dialog: Dialog = new Dialog(
          {
            title: 'Dialog Test', 
            content: '<p>Which option do you choose?</p>',
            actions: dialogActions, 
            disableClose: false, 
            width: '400px',
            height: '170px'
          });
          
        this.dialogService.open(dialog);
    }

• To aplication work right, need to import material/theming and customize the theme of your application. Click here for more information.
  • For example, create file my-theme.scss with this code (change as you want the colors of $primary, $accent, $warn, etc).

// Import Angular Material Design components themes
@import '~@angular/material/theming';
@include mat-core();

// Default App Custom theme
$primary: mat-palette($mat-teal, 500);
$accent: mat-palette($mat-amber);
$warn: mat-palette($mat-orange);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

• Done. If you want to make dinamic style based on theme continue the tutorial.
  • Crate a file named _all-theme.scss and include this code:

// Import all App custom components theme.
@import '~@neoprospecta/angular-dialog/theming/_dialog-theme.component';

// Apply the theme.
@mixin app-components-theme($theme) {
	@include dialog-theme($theme);
}

• Edit again the file my-theme.scss.
  • Include this code:

...
@import './all-theme';
// Apply Angular Material Design global styles
@include app-components-theme($theme);

Features

Open dialog

• Open the dialog passed by parameter.

this.dialogService.open(new Dialog({...}));

Call function onClick dialog buttons

• When create an DialogAction need to add new Function in onClick attr.

new DialogAction({..., onClick: () => this.myFunction(), ...});

Disable dialog closure when dialog buttons is clicked

• When create an DialogAction set the attr closeDialogAfterClick to true;

new DialogAction({..., closeDialogAfterClick: true, ...});

Attributes of DialogAction

Atribute	Type	Description	Example	Default
name	string	Name of button that appears in writed in him.	'Save', 'Cancel', ..	-
onClick	Function	Function of your component called from dialog when the button is clicked.	save() {...}, cancel() {...}, ...	-
color	string	Color of button's background. Only theme colors.	'default', 'primary', 'warn', 'accent', 'background' or 'foreground'	-
position	string	Position of button in dialog. This is optional.	'left', 'right'	'right'
closeDialogAfterClick	boolean	Configure to close dialog after button was cliked. This is optional.	true, false	true

Attributes of Dialog

Atribute	Type	Description	Example	Default
title	string	Title of dialog that appears on top of it.	'Deletion warning!'	-
content	any	Content of dialog that appers on middle of it.	'You are deleting an important data are you sure?'	-
actions	DialogAction[]	Array of actions.	{name: 'Skip', onClick: () => this.skip(), color: 'primary',}	-
disableClose	boolean	This configure if the dialog will close when user click out of dialog or press ESC.	true, false	false
width	string	Customize width of dialog.	'500px'	auto
height	string	Customize height of dialog.	'300px'	auto

License

© Neoprospecta | MIT LICENSE