ngx-confirm-box
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

ngx-confirm-box

This is angular 4/5/6 package used to implement confirm box in your application.

Installation

$ npm install ngx-confirm-box --save

Usage

import the Module in the app.module.ts

import { NgxConfirmBoxModule,NgxConfirmBoxService } from 'ngx-confirm-box';
@NgModule({
  imports: [
    // ...
    NgxConfirmBoxModule
  ],
  providers: [
    // ...
    NgxConfirmBoxService
  ]
})

Add the service in the component you are going to use

import { NgxConfirmBoxService } from 'ngx-confirm-box';
 
//example
export class AppComponent implements OnInit {
  constructor(private confirmBox: NgxConfirmBoxService) { }
 
  bgColor           ='rgba(0,0,0,0.5)'; // overlay background color
  confirmHeading    = '';
  confirmContent    = "Are you sure want to delete tsddshis?";
  confirmCanceltext = "Cancel";
  confirmOkaytext   = "Okay";
 
    yourMethod(){
        this.confirmBox.show();
    }
 
    confirmChange(showConfirm:boolean){
        if(showConfirm){
            //Your code goes here
        }
    }
  }
 
}
 

In Template Use the directive

<!-- <ngx-confirm-box (confirmEvt)="confirmChange($event)"></ngx-confirm-box> -->
<ngx-confirm-box [bgColor]="bgColor" [confirmHeading]="confirmHeading" [confirmCanceltext]="confirmCanceltext" [confirmContent]= "confirmContent" [confirmOkaytext] = "confirmOkaytext" (confirmEvt)="confirmChange($event)"></ngx-confirm-box>

Customization

Propery Uses
bgColor Used to change the background color of overlay div, It uses rgba value, Default value is rgba(0,0,0,0.5)
confirmHeading This is representing title of confirm box, Default value is ''
confirmContent This is representing message what you want to show in confirm box, Default value is Are you sure want to delete this?
confirmCanceltext This is representing reject button text in confirm box, Default value is Cancel
confirmOkaytext This is representing accept button text in confirm box, Default value is OKay

Dependency modules

This package used Bootstrap for the styles, Make sure your project is imported with bootstrap

License

The MIT License (MIT)

Package Sidebar

Install

npm i ngx-confirm-box

Weekly Downloads

56

Version

0.0.3

License

MIT

Unpacked Size

118 kB

Total Files

26

Last publish

Collaborators

  • gandhivpm