How to add custom css to ngx-bootstrap modal with modalService useage(see reasons below)?

Question

I have a very niche use-case. I have to add a modal animation like this: regular css animation But I need to have a component (our own filter component for a datatable) inside said modal. So I need to use the ModalService. But this service is only attaching my custom config like this:

  toggleFilter = () => {
    const modalOptions: ModalOptions = {
      initialState: {
        labels: this.datatableLabels, // needed for filter to have labels
        filterGroups: this.filterGroups // needed to add filterGroups
      },
      class: 'filter-modal' // this sould be my custom class
    };
    this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
  }

to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.

How can I overcome this issue I'm having?

Try to add css by targeting component selector. May be this will not affect other modules when set ViewEncapsulation.None. — khushi, Sep 13 '19 at 14:24
see [way-to-add-custom-class-when-using-ngx-bootstrap-modalservice](https://stackoverflow.com/questions/47957036/way-to-add-custom-class-when-using-ngx-bootstrap-modalservice) — HDJEMAI, Aug 22 '20 at 21:53

score 0 · Answer 1 · answered Sep 16 '19 at 10:42

Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.

How to add custom css to ngx-bootstrap modal with modalService useage(see reasons below)?

1 Answers1