node package manager

@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:

    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: 'Which option do you choose?',
            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 string 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

N|Solid