# כיצד להשתמש ב-api.onPageChange עם api.createWidget?

**URL:** <https://meta.discourse.org/t/how-to-use-api-onpagechange-with-api-createwidget/242744>\
**Category:** Development\
**Tags:** ember\
**Created:** [24 באוקטובר,‏ 2022,‏ 2:55am UTC](https://meta.discourse.org/t/how-to-use-api-onpagechange-with-api-createwidget/242744 "2022-10-24T02:55:24Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [25 באוקטובר,‏ 2022,‏ 6:34pm UTC](https://meta.discourse.org/t/how-to-use-api-onpagechange-with-api-createwidget/242744/5 "2022-10-25T18:34:00Z")

</div>

It’s also worth mentioning that this could be an Ember component. In the long-term we’re going to start relying on Ember more than our custom widget system. We’re still in the process of working on Ember updates, so our documentation on customizing Discourse is a bit behind on this.

I’ve put together a theme component that shows an example of how this can work as an Ember component: [GitHub - awesomerobot/discourse-component-example · GitHub](https://github.com/awesomerobot/discourse-component-example/)

There are 3 important files here:

1. The connector ([/javascripts/discourse/connectors/custom-header-banner-connector.hbs](https://github.com/awesomerobot/discourse-component-example/blob/main/javascripts/discourse/connectors/above-main-container/custom-header-banner-connector.hbs))

2. The component ([/javascripts/discourse/components/custom-header-banner.js](https://github.com/awesomerobot/discourse-component-example/blob/main/javascripts/discourse/components/custom-header-banner.js))

3. The component’s template ([/javascripts/discourse/templates/components/custom-header-banner.hbs](https://github.com/awesomerobot/discourse-component-example/tree/main/javascripts/discourse/templates/components))

The connector is where the component is added, so this only needs to contain `<CustomHeaderBanner />`. The component is where we detect a page changes (route changes) and setup the logic for which image/link randomly appears. The component’s template is how the data is presented in HTML.

---

_[View the full topic](https://meta.discourse.org/t/how-to-use-api-onpagechange-with-api-createwidget/242744)._