auto close of clr-stack-block

Question

 <clr-stack-view>
  <clr-stack-header>Angular stack view</clr-stack-header>

  <clr-stack-block>
      <clr-stack-label>Label 1</clr-stack-label>
      <clr-stack-block>
        <clr-stack-label>Sub-label 1</clr-stack-label>
        <clr-stack-content>Sub-content 1</clr-stack-content>
    </clr-stack-block>
  </clr-stack-block>

  <clr-stack-block [clrSbExpanded]="true">
      <clr-stack-label>Label 2</clr-stack-label>
      <clr-stack-content>Content 2</clr-stack-content>
      <clr-stack-block>
          <clr-stack-label>Sub-label 1</clr-stack-label>
          <clr-stack-content>Sub-content 1</clr-stack-content>
      </clr-stack-block>
      <clr-stack-block>
          <clr-stack-label>Sub-label 2</clr-stack-label>
          <clr-stack-content>Sub-content 2</clr-stack-content>
      </clr-stack-block>
      <clr-stack-block>
          <clr-stack-label>Sub-label 3</clr-stack-label>
          <clr-stack-content>Sub-content 3</clr-stack-content>
      </clr-stack-block>
  </clr-stack-block>

  <clr-stack-block>
      <clr-stack-label>Label 3</clr-stack-label>
      <clr-stack-content>Content 3</clr-stack-content>
      <clr-stack-block>
          <clr-stack-label>Sub-label 4</clr-stack-label>
          <clr-stack-content>Sub-content 4</clr-stack-content>
      </clr-stack-block>
      <clr-stack-block>
          <clr-stack-label>Sub-label 5</clr-stack-label>
          <clr-stack-content>Sub-content 5</clr-stack-content>
      </clr-stack-block>
  </clr-stack-block>
</clr-stack-view>

when i click on a clr-stack-block i want that all other clr-stack-block become closed. How can i achieve this simple behavior? I think that must be here an automatic way, and that i don't need to get this by code

score 0 · Answer 1 · answered Jan 11 '19 at 16:19

You can listen to changes in the expanded state by using the (clrSbExpandedChange)="callback($event)" output. Then when you get a message that something was closed you can set the input bindings for [clrSbExpanded]="false" to close the blocks you want. Its not fully automatic, because you'll have to handle flipping the states yourself but its not too hard to track depending on the specific needs of your project.

auto close of clr-stack-block

1 Answers1