Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

Working with APIs

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

Events

While attributes are a great way to pass data between components there is one limitation. You can only pass data from a parent component to a child component. Not the other way around.

This is where events come in. Events lets a component send a message to a parent component. Component events works almost exactly like events for HTML elements.

Defining events

Just like with attributes you can define events in the component right panel.

You must specify a name for the event as well as "Test value", an example of the payload the event will send along.

Create a new change event

Just like with attributes, the test value is only used while developing your components and has no impact on how your application will run. In this case the test value is used by parent components when defining a workflow to execute when the event fires.

Triggering events

Unlike events for HTML elements, component events are not triggered automatically. To trigger an event you have to use the Trigger action for that event.

Trigger an event using the Trigger action

The data input for the Trigger action lets you set the payload data you wish to send with the event.

Learn more about using events here:

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

ยฉ Copyright 2024 toddle. All rights reserved.