goten-ngmodal-delete
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Generic Modal for deleting items

    When deleting something, we usually want to show some confirmation to make sure the user actually wants to delete and didn't misclick. Because this is common behaviour, and shouldn't change drastically from different use cases, we've created the goten-ngmodal-delete package.

    Requirements

    You must have ng-bootstrap installed

    Usage

    $ npm install -s goten-ngmodal-delete
    //app.module.ts
    ...
    import { GotenModalDeleteComponent } from 'goten-ngmodal-delete'
    @NgModule({
        ...
        declarations[
            ...,
            GotenModalDeleteComponent
        ],
        entryComponents:[
            ...,
            GotenModalDeleteComponent
        ]
    })
    //context.component.ts
    ...
    import { Component } from '@angular/core';
    import { YourService } from './your.service'
    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
    import { GotenModalDeleteComponent } from 'goten-ngmodal-delete'
     
    @Component({
        ...
    })
    export class ContextComponent {
      constructor(
        public yourService : YourService,
        private modalService: NgbModal,
      ){}
     
      delete(id){
        const modalRef = this.modalService.open(GotenModalDeleteComponent, {size:"sm"})
        const modalEdit: GotenModalDeleteComponent = modalRef.componentInstance;
        modalEdit.service = this.yourService
        modalEdit.dataToDelete = id
        modalEdit.onConfirm = (msg) => {
          console.log("press Delete", msg)
        }
        modalEdit.onCancel = () => {
          console.log("press Cancel")
        }
        modalRef.result.then(() => {}, () => {});
      }
    }
     

    goten-ngmodal-delete's parameters

    Prop name Type Description
    service (required) Any Angular service The service to use for deleting the element
    dataToDelete (required) String Parameter to identify the element we want to delete
    nameMethodDelete String The service's delete method name. By default, it uses the name 'delete'
    onConfirm Function Callback when pressing 'Confirm'. The service sends a response by parameter (see example above)
    onCancel Function Callback when pressing 'Cancel'
    textShow Object title ("Delete" by default), message ("The element will be deleted" by default), cancel ("Cancel" button by default), confirm ("Confirm" button by default) that show on Modal.

    Contributions

    To contribute with this package, we use the following workflow:

    • Add an issue with related tags to describe the contribution (is it a bug? a feature request?).
    • Branch your solution from develop, naming it like #<issue_number>-<descriptive_name>.
    • Send a pull request and wait for approval/corrections.

    Install

    npm i goten-ngmodal-delete

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    79.5 kB

    Total Files

    27

    Last publish

    Collaborators

    • joncolque