NGB Modal Overriding CSS

IMRAN 0
Viewed 57

I am using NGB modal in my project in multiple components, and I want to style the modal differently in each component. I have to access some elements like ".modal" which I can't access directly via HTML, hence I have to use ::ng-deep. Now if I style each modal specifically, I can't because of ng-deep( which applies styles to all modals having .modal class). If I includes encapsulation, then modal gets backdrop which disable clicking the background around modal:

encapsulation: ViewEncapsulation.None

enter image description here I have used :host but it didn't helped as :

:host ::ng-deep .modal {
        position: fixed !important;
        right:0 ;
        z-index: 1050 ;
        left: 37%;
        right: 100;
        overflow: hidden;
        width: 25% !important;
        }

Looking forward to see your responses.Thanks

ng-bootstrap bootstrap-modal angular
1 Answers

One of the NgbModalOptions properties is windowClass. Set it in the second parameter of NgbModal.open.

.mymodal {
  width:25%;
}

Then

const modalRef = oNgbModal.open(myModalComponent, {windowClass:'mymodal',backdrop:'static'});

Setting backdrop to 'static' will prevent closing on click. All these are on the api documentation page.

workvact0
Related