@neoprospecta/angular-dialog v4.0.3

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

Attributes of Dialog

License

© Neoprospecta | MIT LICENSE