Open one component instance at a time in Ember Octane

Question

Let's say we have component answer that has isOpen property. By default isOpen is false and when the user is clicking on the answer we are changing the isOpen to true.

We are showing the list of answers. How can we close the first answer when the user clicks on second answer?

I was thinking about creating a service answersSync with globalIsOpen = false.

Answer 1

I would suggest keeping track of which answer is open in your parent component, the one that lists the answers. Then your parent template would look something like:

{{#each this.answers as |answer|}}
  <Answer
    @answer={{answer}}
    isOpen={{eq this.currentlyOpenAnswer answer}}
    {{on "click" (fn this.openAnswer answer)}}
  />
{{/each}}

(then have code in the parent component's js that keeps track of currentlyOpenAnswer, responding to the openAnswer action)