# Can I use routeAction in glimmer single-file components?

**URL:** https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936
**Category:** Development
**Created:** [December 16, 2023, 10:03pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936 "2023-12-16T22:03:38Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 16, 2023, 10:03pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/1 "2023-12-16T22:03:39Z")

</div>

I can use the route-action helper in .hbs template files like this:

```plaintext
@action={{route-action "showLogin"}}

```

Can I use the same declaration in a glimmer template file? I tried this but it doesn’t work:

```plaintext
import { routeAction } from 'discourse/helpers/route-action';

[...]

{{on "click" routeAction "showLogin"}}

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 17, 2023, 4:08am UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/2 "2023-12-17T04:08:47Z")

</div>

In a glimmer component, I believe you don’t need the helper. You can do this directly:

```js
{{on "click" this.showLogin}}

```

If you need to pass arguments:

```js
{{on "click" (fn this.showLogin <argument>)}}

```

It will look for the action:

```plaintext
@action
showLogin(<argument>, event) {}

```

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 17, 2023, 9:52am UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/3 "2023-12-17T09:52:24Z")

</div>

Thank you @Arkshine! I think I understand how to pass actions in a glimmer component in general. However the `route-action` helper moved along the route hierarchy to invoke an action that is not declared in local scope. So you could just declare it on the component, e.g.:

```plaintext
{{route-action "showLogin"}}
{{route-action "showCreateAccount"}}
{{route-action "composePrivateMessage"}}

```

I could just work on the template, care less about the invoked logic because it’s auto-magically passed in (from my point of view :). Which I liked, but I don’t understand if that was ever best practice and if/how I would have access to that now in a glimmer component.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 17, 2023, 1:44pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/4 "2023-12-17T13:44:25Z")

</div>

You’re right; my bad. 😔 I answered automatically without much thought. (well, It was 5 am 😄).  
I don’t have the answer to your question right now, but I’ll get back to you If I figure out something on my side!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 17, 2023, 2:39pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/5 "2023-12-17T14:39:57Z")

</div>

From my test, the following works.

```js
import { get } from "@ember/object";
import { routeAction } from 'discourse/helpers/route-action';

{{on "click" (routeAction "showLogin" (get this "router._router"))}}

```

It assumes you have the `router` service defined in the component.

I’m unsure whether it’s considered bad practice. It doesn’t sound like a good idea, but it works. 😄

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 18, 2023, 12:51pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/6 "2023-12-18T12:51:20Z")

</div>

Thanks again! I agree it looks a bit hacky 😄 Though it also doesn’t work for me.. trying to replace the action in [discourse-featured-lists/javascripts/discourse/components/featured-list.gjs at main · nolosb/discourse-featured-lists · GitHub](https://github.com/nolosb/discourse-featured-lists/blob/main/javascripts/discourse/components/featured-list.gjs)

Well, I might just drop it for now, the component works fine as it is. Just trying to understand a bit better how some of the stuff works under the hood 🧑🏽‍🔧

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 18, 2023, 1:02pm UTC](https://meta.discourse.org/t/can-i-use-routeaction-in-glimmer-single-file-components/288936/7 "2023-12-18T13:02:18Z")

</div>

> [@Arkshine](#):
>
> `import { routeAction } from 'discourse/helpers/route-action';`
> 
> It assumes you have the `router` service defined in the component.

I think if you use the default export, it should work as expected (i.e. without needing to inject the router service, or manually pass in a reference to it)

```js
import routeAction from "discourse/helpers/route-action";

```

(not sure why there is also an internal function exported as `routeAction`… pretty confusing! [Let’s fix that](https://github.com/discourse/discourse/pull/24946))

Although I would say… in general we are trying to move towards ‘closure actions’ like `{{on "click" this.someFunction}}` rather than string-based things like `{{action "blah"}}` or `{{routeAction "blah"}}`.
