I am facing a unique challenge in my project. I have to incorporate a modal animation similar to the one showcased in this example. However, I also need to include a custom component (our filter component for a data table) within the modal. To achieve this, I have decided to utilize the ModalService. The service allows me to attach my own configuration, as demonstrated below:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels,
filterGroups: this.filterGroups
},
class: 'filter-modal'
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
The challenge arises when the ModalService attaches my custom configuration to the modal-content element and the predefined animation and styling are applied to the elements above it. This setup only works when encapsulation is set to ViewEncapsulation.None, which in turn affects other modals in our application. It becomes difficult to apply the correct classes to individual modals.
I am seeking advice on how to resolve this issue and make the necessary adjustments without compromising functionality. Any insights or recommendations would be greatly appreciated.