如何折叠面板？

Question

我一直在做很多研究，但找不到好的解决方案。基本上，我在我的应用程序(Panel 2)中有一个面板，并且想要在单击按钮时将其折叠到左侧，如果再次单击该按钮，则将其展开到右侧。

这是我的工作代码：PLUNKER

---

  <div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
      <div fxFlex [fxShow]="explorerShow"  style="background-color:white;">        
 <div  (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
 </div>
      Panel 2
 </div>

Answer 1

在Panel 2元素上使用fxHide和[fxShow]="expand"

<div class="container">

  <div class="content" fxLayout="row" fxFlexFill>

      <div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
          SIDEBAR
      </div>
      <div class="sec2" fxFlex="100%">
          BODY
      </div>
  </div>

  <button (click)="expand = !expand">Toggle Sidebar</button>

</div>

这是一个工作的stackblitz | your plunkr

更新：这是一个stackblitz with animation