title: How to modify parent component's css property from child component in Angular
body: <p>Is there any way to modify parent component's css property from child component without affecting it globally ?</p>
  
  <p>I have tried following options -<br>
  1 Using <code>ViewEncapsulation.None</code> in child and then modify parent component's style(i.e.
   class). But it changes the style for all components. <br><br>
  2. Using default ViewEncapsulation and using <code>/deep/</code> which also changes the style globally.</p>
  
  <p>Here's the generated style -</p>
  
  <pre><code>&lt;nb-layout-column _ngcontent-vnq-c1="" class="my-component"&gt;&lt;router-outlet _ngcontent-vnq-c0=""&gt;&lt;/router-outlet&gt;&lt;ngx-support-chat _nghost-vnq-c14="" class="ng-star-inserted"&gt;&lt;div _ngcontent-vnq-c14=""&gt;&lt;div _ngcontent-vnq-c14="" class="card" style="border: transparent"&gt;&lt;div _ngcontent-vnq-c14="" class="card-header" style="background-color: #edf1f7; border: transparent"&gt;&lt;div _ngcontent-vnq-c14="" style="display: flex; justify-content: space-between"&gt;&lt;div _ngcontent-vnq-c14="" style="flex-basis: 11%; display: flex;"&gt;&lt;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"&gt;&lt;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"&gt;&lt;g data-name="Layer 2"&gt;&lt;g data-name="message-square"&gt;&lt;rect width="24" height="24" opacity="0"&gt;&lt;/rect&gt;&lt;circle cx="12" cy="11" r="1"&gt;&lt;/circle&gt;&lt;circle cx="16" cy="11" r="1"&gt;&lt;/circle&gt;&lt;circle cx="8" cy="11" r="1"&gt;&lt;/circle&gt;&lt;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"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/nb-icon&gt;&lt;h4 _ngcontent-vnq-c14=""&gt;Chat&lt;/h4&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" style="flex-basis: 50%;"&gt;&lt;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"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" style="display: flex"&gt;&lt;nb-card-body _ngcontent-vnq-c14="" style="background-color: #edf1f7; flex: 1; overflow: hidden; padding: 0; margin: 0;"&gt;&lt;div _ngcontent-vnq-c14="" class="row top"&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt;&lt;nb-select _ngcontent-vnq-c14="" placeholder="all" style="background: #edf1f7;" _nghost-vnq-c9="" ng-reflect-placeholder="all" class="appearance-outline size-medium shape-rectangle"&gt;&lt;button _ngcontent-vnq-c9="" class="select-button placeholder" type="button" ng-reflect-klass="select-button" ng-reflect-ng-class="placeholder"&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "0",
    "ng-reflect-ng-if-else": "[object Object]"
  }--&gt;all&lt;!----&gt;&lt;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"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24"&gt;&lt;g data-name="Layer 2"&gt;&lt;g data-name="chevron-down"&gt;&lt;rect width="24" height="24" opacity="0"&gt;&lt;/rect&gt;&lt;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"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/nb-icon&gt;&lt;/button&gt;&lt;!----&gt;&lt;/nb-select&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt; Status &lt;/div&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt; Date &lt;/div&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" class="row top data"&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt;&lt;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"&gt;&lt;div _ngcontent-vnq-c13="" class="user-container"&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "SafeValue must use [property]="
  }--&gt;&lt;div _ngcontent-vnq-c13="" class="user-picture image ng-star-inserted" style="background-image: url(&amp;quot;assets/images/alan.jpg&amp;quot;);"&gt;&lt;!--bindings={}--&gt;&lt;/div&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "false"
  }--&gt;&lt;div _ngcontent-vnq-c13="" class="info-container"&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "Anonymous"
  }--&gt;&lt;div _ngcontent-vnq-c13="" class="user-name ng-star-inserted"&gt;Anonymous&lt;/div&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "How Are YOu"
  }--&gt;&lt;div _ngcontent-vnq-c13="" class="user-title ng-star-inserted"&gt;How Are YOu&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/nb-user&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt;&lt;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"&gt;OPEN&lt;/button&gt;&lt;/div&gt;&lt;div _ngcontent-vnq-c14="" class="col"&gt; 22/14/1997 &lt;/div&gt;&lt;/div&gt;&lt;/nb-card-body&gt;&lt;div _ngcontent-vnq-c14="" style="flex: 1"&gt;&lt;ngx-chat-card _ngcontent-vnq-c14="" _nghost-vnq-c16=""&gt;&lt;nb-card _ngcontent-vnq-c16="" _nghost-vnq-c19=""&gt;&lt;nb-card-header _ngcontent-vnq-c16=""&gt; Chat Header &lt;/nb-card-header&gt;&lt;nb-card-body _ngcontent-vnq-c16=""&gt; Chat Message &lt;/nb-card-body&gt;&lt;/nb-card&gt;&lt;/ngx-chat-card&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/ngx-support-chat&gt;&lt;/nb-layout-column&gt;
  </code></pre>
  
  <p>And In my child css I have done:</p>
  
  <pre><code>:host-context(.my-component) {
      padding: 0 !important;
  }
  </code></pre>
  
  <p>where I have added <strong>my-component</strong> class to the parent which is <strong>nb-layout-column</strong>, but still it is not working..
  The child component is <code>ngx-support-chat</code></p>