如何使用modalService使用情况将自定义css添加到ngx-bootstrap模态（请参见下面的原因）？

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 to ViewEncapsulation.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?

Answer 1

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.