There is no alternative to ::ng-deep

In Angular, like in any other framework, sometimes you have to style a child component based from a parent component. Since Angular provides encapsulation of CSS (what is great!) it is not a straight forward task (it should not be).

We can split all cases of child styling into two categories:

• logic styling
• presentation styling

Logic styling

Logic styling occurs, when you have a logic that should cause a child to display or behave in a special way. For example, your child component is a status bar that has to have different colors for a “ok” status and “error” status. Since that is clearly a behavior based on logic, it is great to use @Input to pass the status to the child component and handle it there.

We can also pass the color to the component, making it more of a dummy component. However, practice shows a component that accepts a state and handles it, can be beneficial, because it can be reused easier.

Whatever way we will go, using @Input to pass state or element of the logic is great (it can be also replaced by reading the store).

Presentation styling

Presentation styling means we want to style the child component based on how we use it, but it is not a style caused by the logic. For example, in one place we have a button that should have length of 100%, and in the other 50%. The decision is made purely on the presentation principle. Logic…