How can i set Style of a component from a parent?

Issue

I have a 3 party control which i enhanced and mad a component so i can easily reuse and dont have to change the logic everywhere should there be a need for it. Its a angular material control and the appearance is set via the css style. So what i am looking for is a way to set the style from a parent vs on my component.

My current css looks like this below but i want to move it up one level so i can set it from the form that consumes my custom control

mat-button-toggle {
  background: #4CAF50;
  display: initial !important;
  border-radius: 3px !important;
  padding: 4px 0px;
  outline: none;
  }

  mat-button-toggle.mat-button-toggle-checked {
    background: #3f51b5;
    color: #fff;
    outline: none;
}  

Solution

You can use ::ng-deep pseudo class in your parent to disable Angular's default view encapsulation

:host ::ng-deep mat-button-toggle {
  background: #4CAF50;
  display: initial !important;
  border-radius: 3px !important;
  padding: 4px 0px;
  outline: none;
}

:host ::ng-deep mat-button-toggle.mat-button-toggle-checked {
    background: #3f51b5;
    color: #fff;
    outline: none;
}  

• https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
• https://angular.io/guide/view-encapsulation

Answered By - Jason White