Modal Confirm

Handle your modal dialog as you want without having to configure anything.

Installation

NPM (for @angular/[email protected] and higher)

$ npm install @akiltech/modal-confirm --save

YARN

$ yarn add @akiltech/modal-confirm

NPM (for @angular/[email protected] and lower)

$ npm install @akiltech/[email protected] --save

YARN

$ yarn add @akiltech/[email protected]

you must install these two libraries for the application to work properly @angular/material and [email protected]

@angular/material

$ ng add @angular/material

BOOTSTRAP

$ npm install bootstrap

OR

$ yarn add bootstrap

Configuration

import { ModalConfirmModule } from '@akiltech/modal-confirm';

@NgModule({
  declarations: [],
  imports: [ModalConfirmModule],
  providers: [],
  bootstrap: []
})
export class AppModule { }

import bootstrap styles in your styles.scss

// Bootstrap
@import "~bootstrap/scss/bootstrap";

Available Parameters

You can pass two parameters to customize your modal dialog. the first parameter must be of type ConfirmInterface and the second parameter must be of type OptionsInterface

Parameters structure

import { ConfirmInterface, OptionsInterface} from '@akiltech/modal-confirm';

export class AppComponent {

  const dialogData: ConfirmInterface {
      // here dialog data parameters...
  }

  const dialogOptions: OptionsInterface {
      // here options parameters...
  }
}

Available Methods

There are several methods to facilitate the use of a service, you should know that some methods returns an observable.

OPENDIALOG

The openDialog method allows you to open your modal dialog and you can pass or no parameters if you want.

First Parameter (Dialog datas)

| Parameter(s) | Type | Required | Description | |--------------|----------|------|--------------| | type | String | none | Define a modal dialog type (SUCCESS, DANGER, WARNING, DEFAULT) | | headerTitle | String | none | Define a modal dialog header title | | headerShown | Boolean | none | Define if header modal dialog must show | | footerShown | Boolean | none | Define if modal dialog footer must show | | iconShown | Boolean | none | Define if modal dialog icon must show | | iconName | String | none | Define a modal dialog icon name if you don't want default icon | | bodyText | String | none | Define a modal dialog body text | | childComponent | Component | none | You can decide to inject component in you modal dialog | | data | any | none | You can decide to pass datas to your incoming component | | btnYes | String | none | Define a text for your modal dialog confirm button | | btnNo | String | none | Define a text for your modal dialog cancel button |

Second Parameter (Options datas)

| Parameter(s) | Type | Required | Description | |--------------|----------|------|--------------| | size | String | none | Define a size for your modal dialog type | | disabledClose | String | none | You can disable close for you modal dialog |

CLOSEDIALOG

The closeAllDialog method allows you to close your modal dialog.

| Parameter(s) | Type | |--------------|----------| | No parameters | Void |

How to use

Basic use

import { ModalConfirmService } from '@akiltech/modal-confirm';

export class AppComponent {

  constructor(private confirmService: ModalConfirmService) {}

  openDialog () {
      this.confirmService.openDialog().subscribe(dialog => {
        if (dialog) {
          console.log('Do something here');
        } else {
          console.log('Do something here');
        }
      })
  }
}

Advanced use

import { CONFIRMATION_TYPE, ConfirmInterface, ModalConfirmService, OptionsInterface } from '@akiltech/modal-confirm';

export class AppComponent {

  constructor(private confirmService: ModalConfirmService) {}

  const dialogData: ConfirmInterface = {
      type: CONFIRMATION_TYPE.DANGER, // Modal confirm type
      headerShown: false, // if you don't want to show header
      iconShown: false, // if you don't want to show dialog icon
      footerShown: false, // if you don't want to show footer
      headerTitle: 'Your header title',
      iconName: 'your icon name', // if you don't want to use default icon
      bodyText: 'Here body text',
      childComponent: YourComponent, // if you want to inject component
      data: { id: 1, title: 'data title' } // Example of data you can pass to your incoming component
      btnYes: 'Confirm btn label',
      btnNo: 'Cancel btn label'
  };

  const dialogOptions: OptionsInterface = {
      size: '800', // Modal dialog size
      disabledClose: true // you can disable or no dialog closure
  } 

  openDialog () {
      this.confirmService.openDialog(dialogData, dialogOptions).subscribe(dialog => {
        if (dialog) {
          console.log('Do something here');
        } else {
          console.log('Do something here');
        }
      })
  }
}

Notice

• If you want to inject component to your modal dialog, you must add it to entryComponents

import { ModalConfirmModule } from '@akiltech/modal-confirm';

@NgModule({
  declarations: [],
  imports: [ModalConfirmModule],
  providers: [],
  entryComponents: [YourInjectedComponent],
  bootstrap: [],
})
export class AppModule { }

• If you decide to inject component, you can't use bodyText parameter again.
• If you want to pass data to your injected component. use the @Input decorator to get the data conten.

@Component()
export class YourInjectedComponent {

  // Gets incoming data
  @Input() data: any;
}

See demo

• https://github.com/devsanogo/modal-confirm