Show or Hiding content based on current Route

Learning Team
1

Hello Everyone!,

I want to use a conditional like {{#if}} to hide a button element if I’m viewing a certain page. I wanted to know how to check if you’re on a particular route inside of an {{#if}} to hide or show an element like a button?

If {{#if}} is not the best way to do this what should I use? Thanks a bunch!

2

The easiest way is to inject the router service into the component/controller that renders the button, then compare the router.currentRouteName to the route you want to hide the button on. For example (if you have the eq helper from ember-truth-helpers, otherwise you could use one of the computed decorators):

// controller or component:
  @service router;

// template
{{#if (eq this.router.currentRouteName "some-route")}}
  <button ...>
{{/if}}
2 Likes
3

Thanks this is amazing. I’ve never heard of ember-truth-helpers before, They’re going to change my workflow for sure! Thanks again!!

4

Also check out ember-composable-helpers, some really powerful stuff in there