3

I have an application built in Angular that uses Froala as an editor. The Froala editor provides the capability to show a custom pop-up when the user clicks a button. The API example shows that you pass some HTML to the call that Froala will render for you. In this example, it shows passing HTML directly as the template for the popup: https://froala.com/wysiwyg-editor/examples/custom-popup/

// Load popup template.
  var template = {
    buttons: popup_buttons,
    custom_layer: '<div class="custom-layer">Hello World!</div>'
  };

  // Create popup.
  var $popup = editor.popups.create('customPlugin.popup', template);

  return $popup;

Rather than rendering the div with Hello World! in it, I would like to re-use an angular component from my application as the content in the popup, something like this:

// Load popup template.
  var template = {
    buttons: popup_buttons,
    custom_layer: '<app-my-custom-component></app-my-custom-component>'
  };

  // Create popup.
  var $popup = editor.popups.create('customPlugin.popup', template);

  return $popup;

I don't believe that this will work because the HTML won't be going through the Angular renderer. Is there a way I can achieve this?

harleybl
  • 729
  • 6
  • 11
  • I'm trying to do the exact same thing, did you have any luck with this? – kewur Apr 05 '21 at 05:13
  • 1
    @kewur - I was hoping that someone from Froala would comment on this. I wound up falling back to putting a custom button in the toolbar and launching a Material dialog when the button is clicked. The integration isn't as tight, but it satisfied the user requirement. – harleybl Apr 06 '21 at 18:00

0 Answers0