Configure Modal Dialog

Question

I have an issue configuring a modal dialog in angular 2

I am trying to delete a user and I want to have buttons like 'Yes' and 'No'. Here is a shortcut of the modal.

This is the function:

 public deleteUser(i: number) {
    this.modal.alert().size('lg')
      .title('A simple Alert style modal window')
      .body(`
            <h4>Are you sure you want to delete the user?</h4>`)
      .open();

  }

For modal component I am using Modal from angular2-modal/plugins/bootstrap <<import { Modal } from 'angular2-modal/plugins/bootstrap';>>

Could someone tell me how to remove the 'Ok' button and Adding the 'Yes' and 'No' buttons, please?

Thank you

Answer 1

You have chosen the wrong modal method, alert() from the Bootstrap plugin offered by Angular 2 Modal.

Use the .confirm() modal instead.

Check the modal code Generator.

Answer 2

You can create custom modal component like:

export class CustomModalContext extends BSModalContext {
  yesCallback: () => Promise<any>;
}

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-content">
        <div class="modal-header">
            <button  class="close" type="button" (click)="dialog.close()">
                <span aria-hidden="true">×</span>
            </button>
            <h3 class="modal-title">Confirmation</h3>
        </div>


        <div class="modal-body">
            <h4>Are you sure you want to delete the user?</h4>
        </div>

        <div class="modal-footer">
            <button class="btn btn-primary" (click)="yes()">Yes</button>
            <button class="btn" (click)="dialog.close()">No</button>
        </div>
    </div>`
})
export class CustomModal implements CloseGuard, ModalComponent<CustomModalContext> {
  context: CustomModalContext;

  constructor(public dialog: DialogRef<CustomModalContext>) {
    this.context = dialog.context;
    dialog.setCloseGuard(this);
  }

  yes() {
    this.context.yesCallback()
      .then(() => this.dialog.close())
  }

  beforeDismiss(): boolean {
    return true; // prevent closing modal by using Esc
  }
}

Then add it to declarations and entryComponents of your @NgModule metadata

  declarations: [ App, CustomModal ],
  entryComponents: [CustomModal],
  bootstrap: [ App ]
})
export class AppModule {}

And use it as follows

deleteUser() {
   return this.modal.open(CustomModal,
       overlayConfigFactory({
           yesCallback: () => {
               alert('Deleting');
               return Promise.resolve(null)
           }
       }, BSModalContext));
 }

Plunker Example

Answer 3

You can add .footerClass('no-display') before your open(), and define this CSS class like so :

no-display {
    display: none;
}