Using the SASS Function Form to Apply Host Styles Conditionally

Scenario

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation