@action
Binds a method to its instance so it can be used as a callback in templates.
Syntax
@action methodName() {}Returns
MethodDecorator — A decorator that binds the method to the instance.
Examples
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ToggleComponent extends Component {
@tracked open = false;
@action
toggle() {
this.open = !this.open;
}
}
<button type="button" {{on "click" this.toggle}}>
{{if this.open "Hide" "Show"}}
</button>
Notes
@action guarantees correct `this` when the method is passed as a handler
(e.g. via {{on}} or {{fn}}). Without it, the method would lose its
binding when invoked from the template.