🟠 Decoupling Components

Big thanks to Robin Goetz and his Spartan Project. This challenge was proposed by Robin and is strongly inspired by his project.

Information

The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a disabled property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstrate a useful concept.

The behavior of the component (referred to as the brain in the Spartan stack) is located in the brain library. The styling part (referred to as the helmet) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separately. To help us address the issue, we are using the Nx enforce-module-boundaries eslint rule. You can find more details here.

However, the button’s helmet needs to access the state of the component to style the button differently based on its state. As mentioned above, we cannot import the BtnDisabledDirective directly into the helmet library as done currently. If you go to BtnHelmetDirective, you will encounter a linting error. A project tagged with type:hlm can only depend on libs tagged with type:core.

Statement

The goal of this challenge is to find a way to decouple both Directives.

Hint

Hint 1

Carefully read the title of the challenge 😇