CODEWITHSUNDEEP
angularng-bootstrapng-bootstrap-modal
Mario
Mario

Reputation: 41

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

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?

Upvotes: 3

Views: 4609

Answers (2)

Cuga
Cuga

Reputation: 17904

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

Component definition with view encapsulation

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' }).

Upvotes: 0

Michał Tkaczyk
Michał Tkaczyk

Reputation: 736

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.

Upvotes: 2

Related Questions