ng-bootstrap Modal pass additional class to .modal-dialog

Question

I am currently using a custom theme inside a angular application where i need to append a additional css class to the ".modal-dialog" container, which is inside of ngb-modal-window.

According to the documentation (https://ng-bootstrap.github.io/#/components/modal/api) there is only the possibility to pass a class for ngb-modal-window itself by using:

this.modalService.open(MyModalComponent, { windowClass: 'my-own-styles' })

Is there a way to pass a class to the ".modal-dialog" container without using jQuery or so?

ng bootstrap has its own API why you are referring it to as using jQuery.? by the way, if it's for CSS purpose, you can directly select that element by tag like [ngb-modal-window] — Vishal Sharma, Oct 29 '20 at 13:19
This has nothing to do with jQuery, i just mentioned it to not get suggestions to set the class by using jQuery. Beyond that, i just want to set/append a class on the specific container and not to have to rewrite the existing styles of the theme. — Mario, Oct 29 '20 at 13:51

score 2 · Answer 1 · answered Oct 29 '20 at 13:17

2

I've gone through code in Modal component in ng-bootstrap library and I can't find a pretty solution to do so. Anyway, if you only want to use this class to style some part of this component, you can use class for modal window and select some class which is child of window, i.e.:

TS:

{ windowClass: 'window-class' }

SCSS:

.window-class {
    .modal-dialog {
        // some styles you want to apply
    }
}

Also, I don't think it's the good idea to use jQuery with Angular application.

answered Oct 29 '20 at 13:17

Michał Tkaczyk

732
5
18

The class already exists in the theme and has just to be put there. Otherwise i would have to rewrite it. The class contains styles for either left or right positioning of the modal-dialog. Seems like there is no other option then to rewrite the styles. – Mario Oct 29 '20 at 13:27
@Mario Are styles you're talking about was wrote specially for `ng-bootstrap`? – Michał Tkaczyk Oct 29 '20 at 13:30
The theme was written for bootstrap 4.5.x, everything is looking great so far. The class/styles i would like to apply make the modal appear attached either on the left or right side of the window. – Mario Oct 29 '20 at 13:49

score 0 · Answer 2 · answered May 14 '21 at 18:49

Check out the 'examples' section of that documentation. The secret lies in the top of the component definition:

To allow the styles to pass through to the component, you need to set encapsulation: ViewEncapsulation.None.

Once you do that in your component definition, your CSS classes will get picked up. E.g.: this.modalService.open(MyModalComponent, { windowClass: 'my-own-styles' }).

ng-bootstrap Modal pass additional class to .modal-dialog

2 Answers2