Angular SASS Selector with argument?

Issue

Reading through this Angular SASS code:

:host {
  display: flex;
  flex-wrap: wrap;
}

:host(.column) {
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

What does the :host(.column) selector select. Is it the host element when it has a column class attached to it? Is that generally how we should interpret the argument passed in parenthesis?

Solution

Your conclusion is correct. The selector inside :host() must match the :host for the CSS to apply. According to the Angular Component Styling documentation:

Use the function form to apply host styles conditionally by including another selector inside parentheses after :host

In this example the host's content also becomes bold when the active CSS class is applied to the host element.

:host {
 font-style: italic;
}

:host(.active) {
  font-weight: bold;
}

Answered By - Wongjn