Observable not updating

[PoojaC94]

I have a FAST component which has multiple components in it
Component A
const template = html<item> ${when x=> x.isComponentOpen, <componentB></componentB> }
<componentC :onClick={(x)=>x.onClick}></componentC>

@observable isComponentOpen = false;
onClick() { this.isComponentOpen=true }

When componentC calls onClick, the isComponentOpen is set to true but componentB is not appearing. Why does this happen?

[KingOfTac]

@PoojaC94 Can you provide some environment information for me?

• FAST packages you are using with version numbers
• Typescript version (if applicable)
• tsconfig (if using typescript)
• Node version

I tried to repro the issue but everything seems to be working fine on my end. https://stackblitz.com/edit/typescript-warbli?file=index.ts

A couple of things to watch out for:

1. If using typescript. If your tsconfig target is set to "ES2022" or "ESNext" make sure that useDefineForClassFields is false or else decorators and dependency injection won't work properly.
2. If you're not using typescript then decorators won't work at all and the manual observable approach is needed. https://www.fast.design/docs/fast-element/observables-and-state#access-tracking
3. The second parameter of a when directive needs to be a ViewTemplate instance. I can't tell if your example is the actual code you tried or pseudo code, but an example of using when in this case would be:

const template = html`${when(x => x.isComponentOpen, html`<component-b></component-b>`)}

4. I highly recommend reading through the building components section of the docs and building something as you follow along.

[PoojaC94]

so, in x.toggleComponentB, can I do
toggleComponentB(event: CustomEvent<SomeCommonInterface>)
{ if(event.detail.propertyB == "sample"){ this.isComponentBOpen = !this.isComponentBOpen ; } }

[KingOfTac]

Yes

[PoojaC94]

Thanks a lot!! I got it working!

[PoojaC94]

yes. the flow is, click componentC->a list of child elements appear->click on one of them->onClick() is called-> check if one condition is satisfied->set isComponentOpen to true->componentB appears

@KingOfTac the other components have different functions such as opening an app link or opening a link in a different window. When I use $emit(), the toggleComponentB() works but the other functionalities don't.(even when I debug, I see the code flow working but it doesn't seem to open any links. However, if I provide property binding (:onClick) instead of @click (i.e. direct reference to onLinkClick() method), I could get to open links in a separate window or in-app(the toggleComponent doesn't work in this case)

Is there a way to get both the approaches working?

[KingOfTac]

@PoojaC94 can you create some code examples of what you're trying to do in a stackblitz or code sandbox. It will help me be able to help you a lot better if I can see what you're trying to do.