How to modify parent component's css property from child component in Angular

Question

Is there any way to modify parent component's css property from child component without affecting it globally ?

I have tried following options -
1 Using ViewEncapsulation.None in child and then modify parent component's style(i.e. class). But it changes the style for all components.

2. Using default ViewEncapsulation and using /deep/ which also changes the style globally.

Here's the generated style -

<nb-layout-column _ngcontent-vnq-c1="" class="my-component"><router-outlet _ngcontent-vnq-c0=""></router-outlet><ngx-support-chat _nghost-vnq-c14="" class="ng-star-inserted"><div _ngcontent-vnq-c14=""><div _ngcontent-vnq-c14="" class="card" style="border: transparent"><div _ngcontent-vnq-c14="" class="card-header" style="background-color: #edf1f7; border: transparent"><div _ngcontent-vnq-c14="" style="display: flex; justify-content: space-between"><div _ngcontent-vnq-c14="" style="flex-basis: 11%; display: flex;"><nb-icon _ngcontent-vnq-c14="" icon="message-square-outline" style="height: 40px; width: 40px; margin-right: 10px;" _nghost-vnq-c8="" ng-reflect-icon="message-square-outline"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" class="eva eva-message-square-outline" fill="currentColor"><g data-name="Layer 2"><g data-name="message-square"><rect width="24" height="24" opacity="0"></rect><circle cx="12" cy="11" r="1"></circle><circle cx="16" cy="11" r="1"></circle><circle cx="8" cy="11" r="1"></circle><path d="M19 3H5a3 3 0 0 0-3 3v15a1 1 0 0 0 .51.87A1 1 0 0 0 3 22a1 1 0 0 0 .51-.14L8 19.14a1 1 0 0 1 .55-.14H19a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm1 13a1 1 0 0 1-1 1H8.55a3 3 0 0 0-1.55.43l-3 1.8V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1z"></path></g></g></svg></nb-icon><h4 _ngcontent-vnq-c14="">Chat</h4></div><div _ngcontent-vnq-c14="" style="flex-basis: 50%;"><input _ngcontent-vnq-c14="" fieldsize="large" fullwidth="" nbinput="" placeholder="Search" type="text" ng-reflect-field-size="large" ng-reflect-full-width="" class="input-full-width size-large shape-rectangle"></div></div></div><div _ngcontent-vnq-c14="" style="display: flex"><nb-card-body _ngcontent-vnq-c14="" style="background-color: #edf1f7; flex: 1; overflow: hidden; padding: 0; margin: 0;"><div _ngcontent-vnq-c14="" class="row top"><div _ngcontent-vnq-c14="" class="col"><nb-select _ngcontent-vnq-c14="" placeholder="all" style="background: #edf1f7;" _nghost-vnq-c9="" ng-reflect-placeholder="all" class="appearance-outline size-medium shape-rectangle"><button _ngcontent-vnq-c9="" class="select-button placeholder" type="button" ng-reflect-klass="select-button" ng-reflect-ng-class="placeholder"><!--bindings={
  "ng-reflect-ng-if": "0",
  "ng-reflect-ng-if-else": "[object Object]"
}-->all<!----><nb-icon _ngcontent-vnq-c9="" aria-hidden="true" icon="chevron-down-outline" pack="nebular-essentials" _nghost-vnq-c8="" ng-reflect-icon="chevron-down-outline" ng-reflect-pack="nebular-essentials"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"></rect><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"></path></g></g></svg></nb-icon></button><!----></nb-select></div><div _ngcontent-vnq-c14="" class="col"> Status </div><div _ngcontent-vnq-c14="" class="col"> Date </div></div><div _ngcontent-vnq-c14="" class="row top data"><div _ngcontent-vnq-c14="" class="col"><nb-user _ngcontent-vnq-c14="" _nghost-vnq-c13="" ng-reflect-title="How Are YOu" ng-reflect-picture="assets/images/alan.jpg" class="size-medium shape-round"><div _ngcontent-vnq-c13="" class="user-container"><!--bindings={
  "ng-reflect-ng-if": "SafeValue must use [property]="
}--><div _ngcontent-vnq-c13="" class="user-picture image ng-star-inserted" style="background-image: url(&quot;assets/images/alan.jpg&quot;);"><!--bindings={}--></div><!--bindings={
  "ng-reflect-ng-if": "false"
}--><div _ngcontent-vnq-c13="" class="info-container"><!--bindings={
  "ng-reflect-ng-if": "Anonymous"
}--><div _ngcontent-vnq-c13="" class="user-name ng-star-inserted">Anonymous</div><!--bindings={
  "ng-reflect-ng-if": "How Are YOu"
}--><div _ngcontent-vnq-c13="" class="user-title ng-star-inserted">How Are YOu</div></div></div></nb-user></div><div _ngcontent-vnq-c14="" class="col"><button _ngcontent-vnq-c14="" nbbutton="" status="danger" _nghost-vnq-c15="" ng-reflect-status="danger" class="appearance-filled size-medium status-danger shape-rectangle transitions" aria-disabled="false" tabindex="0">OPEN</button></div><div _ngcontent-vnq-c14="" class="col"> 22/14/1997 </div></div></nb-card-body><div _ngcontent-vnq-c14="" style="flex: 1"><ngx-chat-card _ngcontent-vnq-c14="" _nghost-vnq-c16=""><nb-card _ngcontent-vnq-c16="" _nghost-vnq-c19=""><nb-card-header _ngcontent-vnq-c16=""> Chat Header </nb-card-header><nb-card-body _ngcontent-vnq-c16=""> Chat Message </nb-card-body></nb-card></ngx-chat-card></div></div></div></div></ngx-support-chat></nb-layout-column>

And In my child css I have done:

:host-context(.my-component) {
    padding: 0 !important;
}

where I have added my-component class to the parent which is nb-layout-column, but still it is not working.. The child component is ngx-support-chat

Answer 1

If you want to add/modify the css property of the parent component of your child. Example you have this kind of structure:

<div class="parent-container">
  <app-child></app-child>
</div>

And inside ChildComponent css, you want to change/add the style on the .parent-container class outside of your element. You can do so by using host-context

ChildComponent (app-child.component.css)

:host-context(.parent-container) {
    ...your styles here
}

Added a Stackblitz Demo for your reference