1

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.

Yigit Y.
  • 11
  • 2

1 Answers1

1

This scenario should definitely work. One thing that jumped out at me is your event names. You have @mouseEnter and @mouseExit. I think your events are not firing, and so the change in state isn't actually happening. Try changing these to @mouseenter and @mouseleave.

EisenbergEffect
  • 3,989
  • 22
  • 26
  • It was a typo in the question. Event names in the original code are `@mouseenter ` `@mouseenter`. Somehow above example is not working in my project. I'll try removing customTheme property from the child model. Instead of the CustomTheme instance, I'll pass `someSpecialClassName` directly as a prop. – Yigit Y. Feb 05 '21 at 00:01