Как свернуть/развернуть панель с помощью @angular/flex-layout?

Я много занимаюсь этим и не могу найти хорошее решение. В принципе, у меня есть панель в моем приложении (Panel 2) и хотелось бы свернуть ее влево, когда нажимается кнопка, и если кнопка снова нажата, а затем развернуть ее направо. Я использую @angular/flex-layout для моей панели. Может ли кто-нибудь помочь мне получить мою панель? Спасибо заранее!

Пример того, что я хочу, можно сделать в ExtJS: Пример, но снова я хочу, чтобы это было сделано используя angular/flex-layout и сделайте это на панели 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>

Ответы

Ответ 1

Используйте fxHide и [fxShow]="expand" в элементе Панель 2

<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 | ваш plunkr

ОБНОВЛЕНИЕ: Вот stackblitz с анимацией