What is the use case of :host-context selector in angular

Question

I've seen an angular course telling that :

host-context is used to style elements inside a component, depending on some condition set outside of it.

I've searched the official documentation for it in https://angular.io

but it is not documented

can some one explain the different use cases where I can use this selector for an angular component ?

can some one explain the whole meaning of the -context added to host here ?

without an official documentation, does it mean that when someone give one use case, it mean that it is the only case the thing refers to ?

Answer 1

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% }