Angular Dialog for Angular 2+

A service to easily create custom dialogs.

How to install:

Have two ways to install angular-dialog:

• First way:

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

     npm install @neoprospecta/angular-dialog --save

• Second way:

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

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

  2. 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