removing effect of ng-deep on component destroy

Question

I hate to use ng-deep but there is no better alternative for this.

I am using VMware Clarity https://v1.clarity.design/modals in my project and for some cases, I need to overwrite modal-body class. So, I am overwriting it using this in my component.scss file:

::ng-deep .modal-body {
  overflow-y: visible;
  overflow-x: visible;
}

This serves my purpose. But the problem starts for other modals. After opening above modal, if I open any other modal, above styling affects those too. I want above styling only for one modal. So how I can do that.

I was wondering if there is an option to reset above style when the component gets destroyed or What Angular Suggests.

Any way to distinctly access just the VMware modal which you need to change? if not, add a `customClass` to all your modals and then use CSS's `:not` selector — Akber Iqbal, Apr 15 '19 at 13:12
adding a custom class doesn't work. I am using component for modal — undefined, Apr 15 '19 at 13:33

score 5 · Accepted Answer · answered Apr 16 '19 at 22:39

5

You can just write your selector to be more specific so it targets only the desired modal.

<clr-modal class="overflow-modal">...</clr-modal>

::ng-deep .overflow-modal .modal-body {
  overflow-y: visible;
  overflow-x: visible;
}

answered Apr 16 '19 at 22:39

Jeremy Wilken

6,965
22
21

removing effect of ng-deep on component destroy

1 Answers1