CODEWITHSUNDEEP
angular5ng-bootstrapangular6ng-modal
burghboy
burghboy

Reputation: 53

Does the windowClass property or NgbModalOptions actually do anything?

I am opening an NgbModal passing a TemplateRef to create the dialog body, and passing in a custom class via the windowClass property of the NgbModalOptions object that I pass to the open() method. I define the class in a referenced styleUrl in the component and am serving the modal via an injectable service in the component. The modal is loading fine, and I can see the class name when I inspect the DOM, but the class appears to have no bearing on the modal. I would like to use it to customize the size of the modal (css is defined to affect the child div where the size is set), but I have also played with properties that I can see in the Styles tab of the Chrome dev tools, but cannot see it affecting anything. When I inspect in Firefox dev tools, I can find the CSS as an inline style sheet and it has a reference to the ngContent identifier assigned by Angular, so I am assuming that is does not affect the entire document, nor those parts added by ng-bootstrap that constitute the modal wrapper. Has anyone been able to make this work successfully? I am at my wit's end. I would even be happy if I could get an ElementRef of the modal-header dive, but since I am using a template (which is not fully loaded in the DOM at init time) I have not been able to. One of my requirements is that we do all DOM manipulation via Angular to maintain platform independence in the project ... so no jQuery. Any thoughts? And thanks in advance!!

Upvotes: 3

Views: 2676

Answers (1)

Atif Majeed
Atif Majeed

Reputation: 1071

I use windowClass and size attributes of NgbModalOptions to customize the modal. Sample code follows:

this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});

Whereas

.modal-adaptive-s1 .modal-lg {width: 400px !important;  max-width: 400px;}

Upvotes: 2

Related Questions