0

I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ. I can add this anywhere in my app and it works as designed.

Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.

So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do

:host ::ng-deep {
  button.btn.btn-primary {
    .sbl-circ {
      color: white;
    }
  }
}

I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?

Steve
  • 14,401
  • 35
  • 125
  • 230
  • https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep Check that out for what to use instead of `::ng-deep`. My answer in that link works but I rather use your answer. Keep using `::ng-deep`, once deprecated, there will be a replacement. I think your solution is the best way. – AliF50 Jan 31 '20 at 19:55
  • not sure if it will solve the problem, but turning off view encapsulation on parent component might work – Nasim Jan 31 '20 at 19:57
  • Could you provide the markup and/or the component architecture. Or possibly a stackblitz? – g0rb Jan 31 '20 at 20:12

2 Answers2

0

Try using :host-context.

You should be able to use it like:

:host-context(button.btn.btn-primary) .sbl-circ {
  color: white;
}
g0rb
  • 2,234
  • 1
  • 9
  • 13
0

Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example: 

p {
    color: red !important;
}
Gerschel
  • 131
  • 2
  • 6