We are styling the :host element of our component and we want the host element font-weight to be bold when the active class is applied to the host element.

Approach

From the Angular SASS Documentation.

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

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