How to add custom angular 4 components in a bootbox dialog?

Question

I am trying to display some user information in a bootbox dialog. There is a custom component that I need to display within the dialog.

var dialog = bootbox.dialog({
   title: 'User Information Table',
   message: `<div class="myclass"><app-charts></app-charts></div>`,
   buttons: {
  cancel: {
    label: "Cancel!",
    className: 'btn-danger',
      callback: function(){

  }
})

The template is not compiled and hence is being displayed as a normal tag in the bootbox. Is there a way to display an angular 4 component inside the bootbox dialog?

where do you use this code? do have you access to DOM elements? — Max Koretskyi, Sep 12 '17 at 19:09
@AngularInDepth.com I think yes. He has access to DOM elements http://bootboxjs.com/examples.html#also-applies-to-alert-confirm-prompt%0A%0Acustom-dialog-using-init — yurzui, Sep 12 '17 at 19:13
This code is part of a different component to display a table of users. I do have access to DOM elements. Yes. — stackMan10, Sep 12 '17 at 19:17
you can then take advantage of dynamic components, you can pass a DOM element to `create` method — Max Koretskyi, Sep 12 '17 at 19:21

score 0 · Answer 1 · answered Feb 02 '18 at 18:07

0

As far as I know, Bootbox will not do this. I use MatDialog for creating dialogs with custom components. Check it out:

https://material.angular.io/components/dialog/overview

answered Feb 02 '18 at 18:07

NAMS

983
7
17

How to add custom angular 4 components in a bootbox dialog?

1 Answers1