modal not shown

[MarwanYouness]

hi all I'm using angular2 modal in my web app and here I'm using the modal to show delete dialog

deleteFUnction() { this.deleteModal.confirm() .isBlocking(false) .showClose(true) .keyboard(27) .okBtn("delete") .cancelBtn("cancel") .title('delete row') .body('do you want to delete this row') .open(); .then((resultPromise) => { return resultPromise.result.then((result) => { // here goes the delete action }); jQuery('body').removeClass('modal-open'); }, () => {//on cancel do nothing } }); } the problem is that the dialog is not shown on the screen (shown as a very thin line) although it is working properly in other views!! please advice.

[sliktrik]

experiencing the same issue when i use the demo code

openModal() {

this.modal.alert()
    .size('lg')
    .showClose(true)
    .title('A simple Alert style modal window')
    .body(`
        <h4>Alert is a classic (title/body/footer) 1 button modal window that
        does not block.</h4>
        <b>Configuration:</b>
        <ul>
            <li>Non blocking (click anywhere outside to dismiss)</li>
            <li>Size large</li>
            <li>Dismissed with default keyboard key (ESC)</li>
            <li>Close wth button click</li>
            <li>HTML content</li>
        </ul>`)
    .open();

}

I see a 1px line with no content in the following

[JonasJuss]

I am experiencing the same issue, modal sometimes only shows a thin line, when trying to open a custom dialog component.

Details

I open the LoginComponent (custom modal) from the NavbarComponent (which is always open). However, the modal only fails on some occations, seemingly dependent on what page I am showing beneath the navbar:

• If showing page A, and opening modal, it works.
• If showing page B first, then navigating to page A and opening the modal, it does NOT work.
• If showing page B it works, no matter how much I navigate back and fourth before opening modal

The times where it is not working, it seems like the angular2-modal cannot find or start the LoginComponent (custom modal component), because the constructor is never called for this component.

My code:

This is from the NavbarComponent (from where I open the modal):

login() {
    const builder = new BSModalContextBuilder<LoginComponentContext>(
      {  } as any,
      undefined,
      LoginComponentContext); 
      let overlayConfig: OverlayConfig = {
          context: builder.toJSON()
      }
      this.modal.open(LoginComponent, overlayConfig);
      var dialog = this.modal.open(LoginComponent, overlayConfig);
      dialog
        .then((d) => d.result)
        .then((r) => { 
          // success
          console.log("Dialog ended with success: ", r);
         }, (error) => { 
           // failure 
           console.log("Dialog ended with failure: ", error);
        });
  } 

This is the the LoginComponent (custom modal component itself):

import { Component, OnInit } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';

import { LoginService } from '../core/login.service';

export class LoginComponentContext extends BSModalContext {
  constructor(){
    super();
  }
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, ModalComponent<LoginComponentContext> {

  context: LoginComponentContext;

  private email: string = '';
  private password: string = '';

  constructor(
    public _loginService: LoginService,
    public dialog: DialogRef<LoginComponentContext>
  ) { 
    this.context = dialog.context;
    this.context.dialogClass = 'modal-centered';
  }

  ngOnInit() {
  }

  login() {
      this._loginService.login(this.email, this.password).subscribe(x => { 
        console.log("other x", x);
        this.close();
      });    
  }

  close() {
    this.dialog.close();
  }
}

[shlomiassaf]

You all probably have some missing CSS classes some where...

I hope adding Componetn support to the body function will solve this, see #272

[JonasJuss]

@shlomiassaf thanks for the reply.

I might be wrong, but it doesn't seem like a css issue, at least in my case.

Inside the modal-content, the custom component markup is nowhere to be found.

I only see

<div class="modal-content">
     <!--template bindings={}-->
</div>

However, in the cases when the modal works as intented, the custom component is injected here.

<div class="modal-content">
     <!--template bindings={}-->
     <app-login>
           ....
     </app-login>
</div>

In my case it predictably works in some cases and fails in others, seemingly only dependent on what route the app is currently at. It doesn't seem to find the app-login component for some app routes, even though I launch the modal from the navbar-component, which should be the same, and is "alive" all the time.

Hope this helps :)

[JonasJuss]

Update

I realized I was setting the defaultViewContainer in another component than app.component. When I removed this and made sure the following code only was in app.component it solved some of the issues:

 constructor(overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) {
    overlay.defaultViewContainer = vcRef;
  }

However, the error still occurs for a dialog another place in the app, so I'll continue researching what causes it :)

[ronenmiller]

Same issue for me as well. I simply copied your example from here: https://github.com/shlomiassaf/angular2-modal/blob/master/src/demo/app/bootstrap-demo/bootstrap-demo-page/custom-modal-sample.ts

And the usage from here: https://github.com/shlomiassaf/angular2-modal/blob/88bcadaedd22277cf7b6dd55dcb3e48ed10589fb/src/demo/app/bootstrap-demo/bootstrap-demo-page/bootstrap-demo-page.ts

So there are no errors in compilation and the Modal seams to load but it is empty, i.e. template isn't rendering.

[radigost]

I solved a problem changing bootstrap4 to bootstrap3.

[AsmaGargouri]

@JonasJuss , removing

overlay.defaultViewContainer = vcRef;

from all the containers calling the modal solved my problem. I was blocked. Thank you

[ronenmiller]

Exactly what @AsmaGargouri said.

[SaoBiz]

We had the same problem and it was caused by having overlay.defaultViewContainer = vcRef; in a modal that was opening another modal. This would then effectively break all the other modals that we had.

Removing that line from all modal components fixes this issue.

To be able to open a modal in a modal, we had to pass in the original ViewContainerRef so that it could be reused by the nested modal.

From base component:

constructor(
    private vcRef: ViewContainerRef,
    private overlay: Overlay,
    private modal: Modal
) {
    overlay.defaultViewContainer = vcRef;
}

public openModal(): void {
    this.modal
        .open(MyAwesomeModalComponent, overlayConfigFactory({ viewContainerRef: this.vcRef }, BSModalContext))
        .then(dialog => {
            return dialog.result.then(result => {
                // Handle result
            });
        });
}

Then in your modal component, you can use the passed in ViewContainerRef for any subsequent modals:

export class MyAwesomeModalComponent implements ModalComponent<BSModalContext> {
    constructor(
        public dialog: DialogRef<BSModalContext>,
        private overlay: Overlay,
        private modal: Modal
    ) {
        // The view container is now set to the root view container.
        // This will then allow you to open modals from modals as long as you pass the root view container to the other modals
        overlay.defaultViewContainer = dialog.context.viewContainerRef;
    }
}