Need an example to wrap modal into a component

[ajcastro]

Hello. I am not sure if this right place to go but I just need help, an example how can I create a modal component out of the ng2-bs3-modal. I need to create a component named auth-modal. So I have a component file auth-modal.component.ts and and its html file auth-modal.component.html

auth-modal.component.html seems to look like this but not the actual html code

<bs-modal #modal [backdrop]="false">
  <bs-modal-header [showDismiss]="true">
    <h4 class="modal-title">
      Auth Modal
    </h4>
  </bs-modal-header>
  <form
    #authForm="ngForm"
    class="form-horizontal">
  <bs-modal-body>
    Username: <input type="text" name="username">
    Password :<input type="text" name="password">
  </bs-modal-body>
  <bs-modal-footer>
    <div class="btn-group">
      <button>Submit</button>
      <a (click)="modal.dismiss()">Cancel</a>
    </div>
  </bs-modal-footer>
  </form>
</bs-modal>

The auth-modal.component.ts looks like a very usual component where it will handle submission of the form.

Then I have the main html or component lets say main.component.html and main.component.ts where there is a button "Show Auth Form Modal", and this will trigger the showing of the auth-modal. So how am I going to achieve that?

My idea is something like this main.component.html

<button (click)="openAuthModal({username:'john.doe'})"> Show Auth Form Modal </button>
<auth-modal></auth-modal>

main.component.ts

...
public doINeedAServiceThatWillHoldTheAuthModal;
public openAuthModal(objectINeedToPass) {
  // I also need to pass a model object into the authModal component
  this.doINeedAServiceThatWillHoldTheAuthModal.open('lg');
}
...

[donsutherland]

I think I have a similar setup.

I have a ModalComponent class defined with this as the @Component which selector: 'my-modal',

this inside the component class in the declarations

    @ViewChild('myModal')
    modal: BsModalComponent;

    resolve: (z: any) => void;
    reject: (z: any) => void;

and a method on the class like this

open(): Promise<any> {
        return new Promise<any>((resolve, reject) => {
            this.resolve = resolve;
            this.reject = reject;
            this.modal.open();
        });
    }

and this is in the html <bs-modal #myModal [size]='"lg"' (onDismiss)="close()">

Then on the page that includes it

    @ViewChild(ModalComponent)
    myModal: ModalComponent;`

and in the pages html i simply have <my-modal ></my-modal>

when i want to open it in the main page component is call

this.myModal.open()

which returns the Promise that will be used when the modal is closed to inform the parent component things are done.

Inside the modal component i have access to this.resolve(...) and this.reject(...) to control how i notify back up

[ajcastro]

@donsutherland thanks.. you're right.. I have a simpler setup..

What I did. parent_main.component.html

<my-modal #myModal></my-modal> // assign template reference variable myModal
<button (click)="myModal.open()"> Open Modal </button>  // open() method of MyModalComponent

MyModalComponent

  @ViewChild('modal')
  public modal: BsModalComponent;

  public open() {
    this.modal.open('lg');
  }

[donsutherland]

Sure that makes sense. In my use case I needed to control it from inside the code and was passing some additional info inward, so needed the extra wiring for such.

Glad you got it working.