[Angular] Use:host-context and the:: Ng-deep selector to apply context-based styling

If you want to style host component. You can use ': Host-context '.

// Host @Component ({  ' My-app ',  Template: '    <div class= ' styled-component ' >      < hostcontext-styling>  ',})

In the host component, we have a ' styled-component ' class, we want to apply some CSS to it from the child component:

Import {Component} from ' @angular/core '; @Component ({  ' hostcontext-styling ',  Template: '    <div>      I'a div. wants to be styled    </div>  ',  styles: [    ' /      * Apply a border if any of our ancestors have. Styled-component Applied *      / : Host-context (. styled-component) {        border:1px solid gray;        Display:block;      }    '  ]}) Export class Hostcontextstylingcomponent {}

Now if we want to style it child component, we can use ':: Ng-deep ':

Import {Component} from ' @angular/core '; @Component ({  ' hostcontext-styling ',  Template: '    <div>      I'm a div that wants to be styled    </div>    <child-component></ Child-component>  ',  styles: [    '/      * Apply a border if any of our ancestors have. Styled-component app Lied */      : Host-context (. styled-component) {        border:1px solid gray;        Display:block;      }            : Host:: Ng-deep p {        background-color:yellow;      }    '  ]}) Export class Hostcontextstylingcomponent {}

[Angular] Use:host-context and the:: Ng-deep selector to apply context-based styling