Stimulus is a JavaScript framework that is purposed to enhance your HTML. Stimulus will monitor your HTML and wait for its `data-controller` attribute to be declared on an element. Thats when you controller JavaScript is connected and its methods triggered.

The first thing you need to do is add the `data-controller` attribute the to html that you want to connect to Stimulus.

We added `data-controller="example"` so Stimulus expects an `example_controller.js` file to exist.

In our ExampleController class, we are going to use the `connect` method to show that we've connected our controller to the dom.

Connect a Stimulus Controller to your html

In our Stimulus App, we change the `connect` method to a `greet` action (this method name can be anything. 

We then wire that action up to our HTML button by adding `data-action` to it and passing the function that we want to fire, in this case, its `click->example#greet`.

Fire a Stimulus Controller Action on a Click Event

We will use `data-target` to tell our controller which input element we are getting our value from. 

We need to declare `static targets = ['name']` in our controller to tell which element we are referencing. We then reference the value in the input element with `this.nameTarget.value`.

Intro to Stimulus

Instructor

Course content (3 lessons)

Instructor