What is the use case of :host-context selector in angular
This answer explains the difference between host and host-context. Here is an example of host-context usage. Suppose you have a component that wraps an input and this input can be used inside two different components - table and dropdown. When inside a dropdown it should occupy 50% of the width, when in table - 100%. Now if you have these two components selectors defined like this:
<my-dropdown><my-table>Then the styles for the input component can be defined like this:
:host-context(my-dropdown) input { width: 50% }:host-context(my-table) input { width: 100% }