Passing values to ember.js components when they are passed as an argument to addin (eg ember-bootstrap-modals-manager)

Question

I have a question about the addon ember-bootstrap-modals-manager but it's possible the issue I'm describing may occur with other Ember addons.

Using ember-bootstrap-modals-manager you can display an alert dialog with a custom body. Here's a screen dump of an example.

To do this you create an Ember component, the template of which contains your custom body markup, for example ...

<p class="alert alert-info">
  Custom Alert Body Component
</p>

... you can then specify that the body of the alert should use that markup by specifying the name of the component when invoking the alert dialog, like this (assuming the component created is called custom-alert-body) ...

showCustomAlertModal() {
    const options = {
      bodyComponent: 'custom-alert-body',
    };
    set(this, 'options', options);
    get(this, 'modalsManager')
      .alert(options);
 }

... that's fine as it stands but if you want to inject values into the component template, for instance like this ...

<p class="alert alert-info">
  Custom Alert Body Component. The alert msg is : {{alertmsg}}
</p>

... it's not obvious how you can do that because unlike with 'normal' component usage you're not invoking the component in question within a template but just specifying the name in your code .

So my question is (if you're familiar with ember-bootstrap-modals-manager) how can you have a custom body which accepts a value at runtime or (if you're not familiar with it) have you ever seen components used like this in a different context and if so how did they accept a runtime value ?

Answer 1

Yes, you are right. Since the component, bodyComponent, is not invoked by you directly via template but via the dynamic {{component}} helper, the package, ember-bootstrap-modals-manager should expose a way to pass values into the component.

Gone through the source of the package and figured out that the options object has been sent to the dynamically invoked component. So, you can send alertMsg via options object:

showCustomAlertModal() {
    const options = {
      bodyComponent: 'custom-alert-body',
      alertMsg: 'Post created successfully' // <- your alert message
    };
    set(this, 'options', options);
    get(this, 'modalsManager')
      .alert(options);
 }

and can be accessed via options args:

<p class="alert alert-info">
  Custom Alert Body Component. The alert msg is : {{options.alertmsg}}
</p>

However, It's not obvious while skimming through the docs. You can even contribute to the docs when you find time :)