I am trying to design some components using FASTElement. However, I couldn't pass a dynamic property from parent to a child component. In my design, I have two FAST templates as follows,
childCompTemplate.ts
const myChildComponent = () => html<ChildModel>`<div class=${x => x.customTheme!.someSpecialClassName}`>
<!-- some stuff -->
</div>`
parentCompTemplate.ts
const myParentComp = () => html<ParentModel>`<div @mouseEnter=${x => x.customTheme!.handleMouseEnterEvent()} @mouseExit=${x => x.customTheme!.handleMouseExit()}`>
<my-child-component :customTheme=${x => x.customTheme} />
</div>`
CustomTheme.ts
public class CustomTheme {
@observable someSpecialClassName: string;
/* Some other props and functions */
public handleMouseEnter() {
this.someSpecialClassName = "foo";
}
public handleMouseExit() {
this.someSpecialClassName = "bar";
}
I referenced customTheme property in the model files,
ParentModel.ts <= this is an interface
...
customTheme?: CustomTheme;
...
ChildModel.ts
...
@observable customTheme?: CustomTheme;
...
However, when I triggered the event, I saw no change in the child component's div class. Could you please help me to understand which point that I am missing?
Thanks for the help!
TL;DR I want to update a property when some specific event is fired on the parent template. However, changes are not affecting the child.