Ngx-bootstrap: add class to template modal ?

[chaouiy]

when using ngx-bootstrap template modals we don't have access to modal root tag. How to add class to modal-content element to customise modal when using template modals ?

[mind84]

same problem

[IlyaSurmay]

this.modalService.show(template, {class: 'customClass'}); this will add customClass to modal-dialog
There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

[mjschranz]

@amineparis The best option would be to add a class like @IlyaSurmay mentioned and then target the modal-content class in your CSS to override anything you might need to.

What would be nice however is the ability to apply a class to the root modal-container element itself.

[jinho1410]

I had a hard time.
Do not misunderstand the variable name initialState.
initialState passes input data.
I followed the example I saw earlier and it was wrong.

     const initialState = {
       myInterval: 0,
       noWrapSlides: false,
       images: this.images.slice (sliceIndex) .concat (afterAddImages)
     };
     this.modalRef = this.modalService.show (CarouselComponent, {initialState});

I made the following changes.

     const modalOptions = {
       myInterval: 0,
       noWrapSlides: false,
       initialState: {images: this.images.slice (sliceIndex) .concat (afterAddImages)}
       , class: 'modal-lg'
     };

     this.modalRef = this.modalService.show (CarouselComponent, modalOptions);

Well done.
good luck

[cavalos0086]

@IlyaSurmay This doesn't solve the issue when you need access the root of the modal itself. i.e (change the color of the modal background). If add a class to the modal-content, it will only apply to that portion but not the background.

Any workaround?

And also, QQ: Why do we do that? why don't just apply the class at the root of the modal?

[jinho1410]

You can change it by overriding .modal-backdrop on the global style sheet.

.modal-backdrop {
background-color: red;
}
What color do you like?
I did a test to answer your question.
I could not find an ideal color other than black.

[ashecret]

@amineparis @cavalos0086 The workaround is to use Child Modal. My implementation is below-

HTML

<div bsModal #bsModalRef="bs-modal" class="modal fade slide-right" tabindex="-1" role="dialog" aria-hidden="true">
     <app-view-retailer [objectId]='objectId'</app-view-retailer>
</div>

Parent component- reference

import { ModalDirective } from 'ngx-bootstrap/modal'
@ViewChild('bsModalRef') bsModalRef: ModalDirective

Now you can open it programmatically etc.

openRetailerModal() {
    this.bsModalRef.show()
}

[velorium-star]

And how would you position modal to the far right/left? Adding class 'right' to the modal container works perfectly, although only from the dev tools console since we are not able to assign class to the root element via Angular.