Ember-bootstrap to trigger modal from javascript

Question

From the link here if you scroll down to the example with the button label 'Reopen Modal' They seem to be triggering the modal from javascript. I have tried Ember.$('.modal).modal('show') with no luck, and cant seem to figure out a way to trigger it from js.

My goal is, after a user submits a form and it is successfully validated, the modal appears.

Template

{{#bs-form model=register onSubmit=(action 'submit') novalidate=true as |form|}}
  {{form.element controlType="text" label="Username" placeholder="Username" property="username"}}
  {{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
  {{bs-button defaultText="Submit" type="outline-success" buttonType="submit"}}
{{/bs-form}}

{{#bs-modal-simple open=modal1 title="Modal" renderInPlace=true}}
    This is a Modal.
{{/bs-modal-simple}}

Component

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit() {
      Ember.$('.modal').modal('show');
    },
  },
});

Answer 1

No. The modal would be shown by a boolean property.

actions: {
    submit() {
      this.set('modal1', true);
    },
  },