I've been experimenting with designing components using FASTElement. But I've hit a roadblock trying to pass a dynamic property from parent to child component. Here's a snippet of my design, featuring two FAST templates:
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";
}
In my model files, I made reference to the customTheme property:
ParentModel.ts <= this is an interface
...
customTheme?: CustomTheme;
...
ChildModel.ts
...
@observable customTheme?: CustomTheme;
...
But despite triggering the event, I'm not seeing any changes in the child component's div class. Can someone point out what I might be missing?
Appreciate any assistance provided!
TL;DR I need to update a property when a specific event occurs in the parent template, but the changes aren't reflected in the child.