powered by

Event Handing

How to create on-click event handling?

  • Create a mutable boolean variable inside the component.
Boolean variable
boolean $<boolean-variable>: true
  • Give if condition to the Body part.
if-condition
if: { box.<boolean-variable> }
  • Inside the Header row, we create the event for on-click.
on-click event
$on-click$: $toggle($<function-argument> = $box.<boolean-variable>)
  • Define the toggle function after component.
on-click event
-- void toggle(<function-argument>):
boolean $function-argument:

<function-argument> = !<function-argument>;
Here We Go!!! We have made the Expander Project from scratch.

Don’t want to rewrite this but want to reuse it in your next project?

Or, You want to share it with others?

In Part 5, you will learn how to publish it as a package on GitHub.
Continue with the part 5 now.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

Event Handing

How to create on-click event handling?

  • Create a mutable boolean variable inside the component.
Boolean variable
boolean $<boolean-variable>: true
  • Give if condition to the Body part.
if-condition
if: { box.<boolean-variable> }
  • Inside the Header row, we create the event for on-click.
on-click event
$on-click$: $toggle($<function-argument> = $box.<boolean-variable>)
  • Define the toggle function after component.
on-click event
-- void toggle(<function-argument>):
boolean $function-argument:

<function-argument> = !<function-argument>;
Here We Go!!! We have made the Expander Project from scratch.

Don’t want to rewrite this but want to reuse it in your next project?

Or, You want to share it with others?

In Part 5, you will learn how to publish it as a package on GitHub.
Continue with the part 5 now.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.