How to add unique custom CSS to ngx-smart-modals - html

Question

I am currently building an application in Angular 6.
I am using ngx-smart-modal to handle all of my modals.
I have 20+ modals in my application.
How do I apply CSS to each one uniquely.
I have tried using the [customClass] parameter in their documentation, but I am relatively new to Angular/HTML/CSS/etc, and I could not get it working.
I can change the sizes of my modals globally using
/deep/ .nsm-dialog{ -insert style- }
But could not replicate for individual modals
HTML
<ngx-smart-modal #Create identifier="Create" customClass="'modal'">
CSS
.nsm-dialog.modal {
width: 50vw;
height: 50vh;
}
I would like to have each modal with unique CSS.
Ex.
* Modal1 size is 50vw x 50vh
* Modal2 size is 20vw x 40vh
* etc.

Answer 1

For using customClass directive with brackets, as [customClass], you must pass a string to the directive, like :
<ngx-smart-modal [customClass]="'my-custom-class'"></ngx-smart-modal>
Finally, you can style this and only this modal with my-custom-class.

Answer 2

I was having the same issue.
My resolution was making a ngx-modal.scss file and including it in style.scss after #import "~ngx-smart-modal/ngx-smart-modal";
I had to add !important to a few styles. Didnt love that but it worked.
HTML - in component
<ngx-smart-modal #modalName
identifier="modalName"
[customClass]="'confirmation-modal'">
</ngx-smart-modal>
scss - ngx-modal.scss
.confirmation-modal {
background-color: black !important;
border: 1px solid grey;
.modal-body {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-top: 1px solid transparent;
border-bottom-right-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
top: 60px;
position: relative;
}
}

Answer 3

For normal way above told examples will work, but if you are creating modals in dynamic way you should do
const optionModel: INgxSmartModalOptions = {
closable: true,
escapable: false,
dismissable: false,
customClass: "signSowClass" };
let modal;
modal = this.ngxSmartModalService.create('signSow', SignSowComponent, optionModel).open()
You can pass the custom class through options as mentioned above