# Showing different content for mobile view in a .gjs file

**URL:** https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657
**Category:** Development
**Tags:** mobile, ember
**Created:** [July 17, 2025, 3:39pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657 "2025-07-17T15:39:55Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![martinmodrak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martinmodrak/32/162633_2.png) [@martinmodrak](https://meta.discourse.org/u/martinmodrak)
#### Post date: [July 17, 2025, 3:39pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/1 "2025-07-17T15:39:55Z")

</div>

Trying to update our custom theme component to the new standard after the deprecation notice and I can’t figure out how to show different stuff for mobile users in this setting.

The theme guide doesn’t mention anything about this, the only relevant post I found is [api.renderInOutlet not rendering? - #3 by NateDhaliwal](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/3) which uses `this.site.mobileView` so I assumed something like the following should work:

```plaintext
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    <template>
      {{#if this.site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </template>
  );
});

```

But I only ever see the normal content… I am obviously missing something basic…

Thanks for any hints!

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [July 17, 2025, 4:22pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/2 "2025-07-17T16:22:55Z")

</div>

Oh, it probably just needs to import the `site` service manually.

```jsx
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  const site = api.container.lookup("service:site");
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    <template>
      {{#if site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </template>
  );
});

```

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [July 17, 2025, 10:46pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/3 "2025-07-17T22:46:01Z")

</div>

Would `@service site;` work also?

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [July 17, 2025, 11:21pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/4 "2025-07-17T23:21:53Z")

</div>

No. The `@service` decorator is only available in Ember classes like Components or Services. If the `<template>...</template>` was refactored as a separate component, then you can use the decorator. As the `apiInitializer()` is only a function, the service has to be accessed like normal JS.

You can see [Ember object ownership (getOwner, service injections, etc.)](https://meta.discourse.org/t/ember-object-ownership-getowner-service-injections-etc/292080)

---

<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: [July 17, 2025, 11:38pm UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/5 "2025-07-17T23:38:01Z")

</div>

If you like, you can put an entire class inside the `renderInOutlet` call:

```gjs
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { service } from "@ember/service";

export default apiInitializer((api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    class extends Component {
      @service site;

      <template>
        {{#if this.site.mobileView}}
          Mobile!
        {{else}}
          Normal!
        {{/if}}
      </template>
    }
  );
});

```

But the `.lookup()` solution is also reasonable - that’s what `@service` is doing behind-the-scenes anyway :ok_hand:

---

<div class="post-metadata">

### Author: ![martinmodrak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martinmodrak/32/162633_2.png) [@martinmodrak](https://meta.discourse.org/u/martinmodrak)
#### Post date: [July 18, 2025, 7:45am UTC](https://meta.discourse.org/t/showing-different-content-for-mobile-view-in-a-gjs-file/374657/6 "2025-07-18T07:45:54Z")

</div>

Thanks, this works!

Also funny how (at lest this flavor of) modern JS increasingly looks like enterprise Java when I used to work in that world (early 2010s) :smiley: