How to apply Style to custom component content in Angular?

Apply a class to the parent (let's say green-button). In the child's css you need to check that my parents have a green-button class, if yes then it should change its color.

In the child's css file

:host-context(.green-button) button{

  color : green

  }

Inside custom-component-example.html:

The child component should be responsible for how it looks. The parent should be concerned about itself. In the future, if you have two children with your parents, it will be difficult to manage what style to pass to what child. Using this method, altering style is not only easy but also manageable