How to enable a component's property when i transitionToRoute

Question

Hello i have a search component on page header.
When i click on a magnifyng glass, a flag property is getting true, so the search-box component is displayed like so:

When i press Enter on the magnifying glass i call an action, which, inside the application/controller.js it makes a redirection to a result-page, like so:

`actions: {
updateQuery(query) {
  return this.transitionToRoute('search-results', {
    queryParams: {
      query
    }
  })
 }
}

The redirections works as expected and the results-page loads, but the search-box component is still displayed! I havent found a way to disable the property flag , that it is inside the header component, yet.

Any ideas how to trigger that, when i do the redirection ?

Answer 1

You can manage flag property in your application/controller.js and pass it to your header as 2-way-binding like flag=flag and bind it to your search component. Then, in your updateQuery action of your controller you can set the flag to false like this:

updateQuery(){
  this.set('flag', false);
  this.transitionToRoute('search-results');
}

You can take a look at this twiddle for this usage.