CODEWITHSUNDEEP
angularsass
Jeyabalan Thavamani
Jeyabalan Thavamani

Reputation: 3327

Difference between :host::ng-deep .class and .class :host::ng-deep?

What is the difference between the below two in scss, Give some examples in snippet.

:host::ng-deep .content-body {
...
}

and 

.content-body :host::ng-deep {
...
}

Upvotes: 20

Views: 50000

Answers (2)

Yogesh Waghmare
Yogesh Waghmare

Reputation: 1045

::ng-deep: Used to deeply style nested child components, bypassing view encapsulation.

::ng-deep .child-component-class { 
   color: red; 
   }

:host: Targets and styles the host element of a component.

/* Component's CSS */
:host {
  display: block;
  border: 1px solid black;
  }

:host-context(): Styles based on a condition in the ancestor elements of the component, useful for theming or contextual styles.

/* Component's CSS */ 
:host-context(.theme-dark) .element { 
  background-color: black;
   color: white; 
}

Upvotes: 0

Vandesh
Vandesh

Reputation: 6894

First of all, :host and ::ng-deep are Angular constructs, nothing to do with SASS

Now, let's say you have a component named "blog" defined in Angular and blog.component.scss is where you define the SASS for it. Then,

CASE 1 : 

:host::ng-deep .content-body {
...
}

will apply style defined to any element with the class .content-body inside the component scope. Eg: 

<div>
  <blog>
    <div class="content-body"></div>
    <div class="some-extra-content">
      <div class="content-body"></div>
    </div>
  </blog>
</div>

In the above case, both the class="content-body" divs will have the style applied.

CASE 2 :

.content-body :host::ng-deep {
...
}

will apply style defined to only the component instances which are defined inside an element which has class="content-body"
Eg: 

<blog></blog> <!-- Style won't be applied here -->
<div class="content-body">
  <blog></blog> <!-- Style will be applied here -->
</div>

You can check a StackBlitz here. In the StackBlitz example, color:red is applied because of CASE 1 inside app.component.css and color:yellow is applied to only one of the hello components because of CASE 2.
Feel free to fork the Stackblitz and play around.

NOTE : If you don't know already, the shadow piercing combinator ::ng-deep is being deprecated

Upvotes: 46

Related Questions