html - changing the style of a component which is being used by its selctor

Question

I am using a component with its selector in another component, like this:

<div class="col-xl-4" style="margin-bottom: 30px;">
    <app-patient-info-accordion *ngIf="patient" [cardTitle]="'General Information'" [patient]="patient"></app-patient-info-accordion>
  </div>

now I want to set specific styles for elements inside of "app-patient-info-accordion" and I literally have no idea how to do it! any suggestion?

Answer 1

u can use ::ng-deep on parent component to force style to child component

for example

html

<div class="main col-xl-4" style="margin-bottom: 30px;">
    <app-patient-info-accordion *ngIf="patient" [cardTitle]="'General Information'" 
    [patient]="patient"></app-patient-info-accordion>
</div>

css

.main {
   ::ng-deep {
      .title  {
        color: red;
      }
   }
}

the title class on child component will get that color style.

read more on https://blog.angular-university.io/angular-host-context/