How to vertically center modal dialog using ng-modal

Question

Is it possible to to specify the modal-dialog-centered class somehow? There is an windowClass option for the outer element, but I don't see a way to specify modal-dialog-centered on the inner element.

Answer 1

I'm just beginning with Angular and I know it's against it's principles but only way I found to achieve centering was specifying opener function in HTML template like this:

    <button (click)="openModal(myModalTemplateId)" btn btn-secondary">

and define this nasty function inside component like this:

    openModal(content) {
      let x = this.modalService.open(content);
      // change the padding value for your case or use some other styling
      x._windowCmptRef._component._elRef.nativeElement.style = 'display: block; padding-top: 30%';
      // you can try to use the code bellow to set the class but it's not working for me
      // x._windowCmptRef._component._elRef.nativeElement.children[0].classList.add('modal-dialog-centered');
    }