# What is best way to pass value out from route change

**URL:** <https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221>\
**Category:** Ember CLI\
**Created:** [March 21, 2016, 12:54pm UTC](https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221 "2016-03-21T12:54:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adsl99801](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@adsl99801](https://discuss.emberjs.com/u/adsl99801)\
**Post date:** [March 21, 2016, 12:54pm UTC](https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221/1 "2016-03-21T12:54:23Z")

</div>

1. 

I have a **my-heade** r component on top of my webpage

```
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hamburger">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">app</a>
    </div>
    <div class="collapse navbar-collapse" id="hamburger">
        <ul class="nav navbar-nav">
          {{#each liStringArray as |item index|}}
              <li class={{if (eq activePosition index) 'active' ''}}>
                  <a href="{{item.route}}">{{item.name}}</a></li>
          {{/each}}

        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li class={{if (eq activePosition 3) 'active' ''}}><a href="#/account/signup">signout</a></li>
            <li class={{if (eq activePosition 4) 'active' ''}}><a href="#/account/signin">signin</a></li>
        </ul>

    </div>
</div>

```

2 .I have a service called **my-pre** to keep valve(activePosition) to recode now active position (because I want set class value .active in **my-header** in _li tag_ )

```
    export default Ember.Service.extend({
      activePosition: 0,});`

```

_when click button send an action to it’s controller to set activePosition value_

(ex:activePosition =0 first index li set active or activePosition =1;) t it is every tedious

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [March 21, 2016, 1:06pm UTC](https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221/2 "2016-03-21T13:06:04Z")

</div>

Personally, I’d suggest just using `{{link-to}}`'s along with the [ember-cli-active-link-wrapper addon](https://github.com/alexspeller/ember-cli-active-link-wrapper) Your template example would become (and without the need of a Service):

```nohighlight
<div class="collapse navbar-collapse" id="hamburger">
    <ul class="nav navbar-nav">
        {{#each liStringArray as |item|}}
            {{#active-link}}
                {{link-to item.name item.route}}
            {{/active-link}}
        {{/each}}
    </ul>
    <ul class="nav navbar-nav navbar-right">
        {{#active-link}}
            {{link-to "signout" "account.signup"}}
        {{/active-link}}
        {{#active-link}}
            {{link-to "signin" "account.signin"}}
        {{/active-link}}
    </ul>
</div>

```

---

<div class="post-metadata">

**Author:** ![adsl99801](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@adsl99801](https://discuss.emberjs.com/u/adsl99801)\
**Post date:** [March 22, 2016, 7:46am UTC](https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221/3 "2016-03-22T07:46:14Z")

</div>

When I want programmably transitionTo other Route (ex:when not signin)

How to set class ‘.active’ on right {{#active-link}} ?

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [March 22, 2016, 1:06pm UTC](https://discuss.emberjs.com/t/what-is-best-way-to-pass-value-out-from-route-change/10221/4 "2016-03-22T13:06:32Z")

</div>

> When I want programmably transitionTo other Route (ex:when not signin)

That is a completely different topic, but basically use the `transitionTo()` in either the Routes [`redirect()`](http://emberjs.com/api/classes/Ember.Route.html#method_redirect) or [`beforeModel()`](http://emberjs.com/api/classes/Ember.Route.html#method_beforeModel) hook (depending on your needs).

Unless you are trying to show different links in your template based on some status. Then you use the `{{#if}}` block. Something like:

```auto
<ul class="nav navbar-nav navbar-right">
  {{#if userSignedIn}}
    {{#active-link}}
      {{link-to "signout" "account.signup"}}
    {{/active-link}}
  {{else}}
    {{#active-link}}
      {{link-to "signin" "account.signin"}}
    {{/active-link}}
  {{/if}}
</ul>

```

> How to set class ‘.active’ on right {{#active-link}} ?

That’s what the `{{active-link}}` does _for_ you, automatically add/removes the `.active` class when a child `{{link-to}}` is active. There is no need to do that with your own `{{if}}`