Last updated on December 20, 2021
There isn’t a lot of information online about how you should go about communicating between Stimulus controllers. There is one issue on Github which explains how you should do it using this.application.getControllerForElementAndIdentifier but I was not able to make it work using this approach.
In this article, I will teach you how to achieve this using another technique - create a custom event in one controller which triggers an action in another controller.
In your stimulus controller, you can create a custom event using:
const event = new CustomEvent("update-map"); window.dispatchEvent(event);
Let’s break down this code.
In your HTML, define the following data-action inside your receiving Stimulus controller.
This will trigger the updateHotspotLocation method in map_controller.js.
You can now head over your receiving controller and continue coding.
Articles, guides and interviews about web development and career progression.
Max 1-2x times per month.