ngIf on modal instance behaviour

[damienpontifex]

I have noticed that if I have an *ngIf on the modal instance tag, the behaviour of the component fails to do the appendTo which moves the modal to the bottom of the body. At this stage, the if block evaluates to true i.e. tags may be:

<modal *ngIf="booleanProperty">
</modal

Stepping through code, the init method gets called on the ModalInstance but the modal ends up in the middle of the body, resulting in it appearing behind the modal-backdrop.

At this stage, I have moved my ngIf further inside the content of my modal, but thought it would be good to get around this issue in the case others come across it and to allow it to behave better.

It is my understanding that angular2 will remove it from the DOM when ngIf changes which is probably causing the issue when it gets re-added. I am trying to see if there is a content event fired when ngIf changes or something such that the init logic could be called then.

[dougludlow]

@damienpontifex good find. I'll need to put some tests in place and figure out a good way to approach this. Open to any suggestions.

[renehamburger]

We've solved the hiding/showing of the dialog differently to ensure that the template code within the dialog is not parsed until the dialog is actually being shown the first time. The basic idea is to use an input-output property in addition to the ngIf to trigger the showing of the modal:

<a (click)="showModal = true">Show Modal</a>
<custom-modal *ngIf="showModal" [(open)]="showModal"></custom-modal>

@Component(Object.assign({
  selector: 'custom-modal',
  template: `<modal #modal> ... </modal>`
}, ModalBaseComponent.metaData))
class CustomModalComponent implements OnChanges {

  @ViewChild(ModalComponent) protected modal: ModalComponent;
  @Input() private open: boolean;
  @Output() private openChange = new EventEmitter<boolean>();

  public ngOnChanges(changes: SimpleChanges) {
    if (changes['open']) {
      if (this.open && !(this.modal && this.modal.visible)) {
        this.modal.open();
      }
    }
  }

  public onClose() {
    ...
    this.openChange.emit(false);
  }

  public onDismiss() {
    ...
    this.openChange.emit(false);
  }
}

We've actually moved the code above into a base class we're using for all modals, but this is the basic thrust. Would that be a pattern that ng2-bs3-modal could support out of the box?