[feature request] Pass custom class to modal

[jspizziri]

Perhaps I missed something when looking through the code; however, it would be nice if it were possible to pass custom classes on the modal with NgbModalOptions, that would then be applied to the modal template.

Thanks!

[pkozlowski-opensource]

I'm very, very hesitant to go down this path. The thing is that modal window and backdrop creates many elements so if we want to allow users to customise most things the number of options would explode.

I understand the need but at this point your best option is just to fork the directive and maintain your own fork that would suit your particular needs. We want to support some form of customisation in the future but probably sth more sophisticated than just adding CSS classes.

Going to keep this one open as I understand the need but don't hold your breath and expect movement on this issue any time soon. What we need is design for something more flexible.

[jspizziri]

@pkozlowski-opensource, I appreciate the desire for an abstract solutuon. Perhaps we can begin a discussion on the design by articulating all the requirements of customization. I would rather begin a discussion and potentially try and contribute then form my own little tribe by forking, as I'm entirely disinterested in maintaining my own fork 😊

[pkozlowski-opensource]

@jspizziri sure, feel free to start a design doc and link it here. You can find an example of a design doc for other modal part here

As for requirements / flexibility we will have really hard time predicting what / where users might want to add. So ideally we would allow them to provide a custom window component and the custom one should replace the default one: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal-window.ts

As you can see the current modal window has quite a bit of functionality so this would have to be moved to some other place so providing custom components is easy. Ideally users should just provide the template bit (

ng-bootstrap/src/modal/modal-window.ts

Lines 26 to 28 in 54ae058

	<div [class]="'modal-dialog' + (size ? ' modal-' + size : '')" role="document">
	<div class="modal-content" (click)="stopPropagation($event)"><ng-content></ng-content></div>
	</div>

) but I'm not sure how to do this, technically speaking

Of course there are other ways of solving the customization problem so let your creativity go wild :-)

Just to set expectations: customization capabilities are on the roadmap but we will start to seriously look into those topics only after 1.0 release (and this means that things like animations, keyboard navigation and accessibility got priority). Of course if anyone wants to step in and drive customisability efforts then things might happen sooner.

[colinmorelli]

I have a similar need. While I definitely understand the desire to have a flexible and abstract solution to customization, I think most needs (likely related to style) can be met by simply allowing a custom class to be attached to the window and backdrop. CSS selectors can then target any child elements that ng-bootstrap may add fairly easily.

Is this something that would be considered until a larger solution can be made?

[pkozlowski-opensource]

Is this something that would be considered until a larger solution can be made?

Yeh, this sounds like a potentially good short-term solution...

[DenisDremkov]

openModal () {
this.modalService.open(StageSettingsComponent, {backdropClass: 'backdrop-class'});
}

// SCSS (global)
.backdrop-class + .modal {
.modal-dialog {
.....
}
}