title: angular2 ng2-bootstrap collapse animation workaround
body: <p>I am aware the issue that currently the animation code in ng2-bootstrap is commented out due to the unavailability of angular2's directive animation support.</p>
  
  <p>Therefore I created a workaround by using angular2's animate in my component.</p>
  
  <pre><code>animations: [
    trigger('slideMenu', [
      state('true', style({ height: '0px' })),
      state('false', style({ height: '*' })),
      transition('1 =&gt; 0', animate('200ms ease-in')),
      transition('0 =&gt; 1', animate('200ms ease-out'))
    ]),
  ]
  </code></pre>
  
  <p>Update: I have plunker example: <a href="https://plnkr.co/edit/iVffRLUhzp43DXo5BYlJ?p=preview" rel="noreferrer">https://plnkr.co/edit/iVffRLUhzp43DXo5BYlJ?p=preview</a> (If it failed to load the example, please click on stop and run button several times. It will eventually work).</p>
  
  <p>I want the above animation code to create the silde-out effect when expanding and slide-in effect when collapsing. However the animation only works when expanding. When I try to collapse the menu, it just went disappeared without any animation.</p>
  
  <p>I'm wondering if anyone has ever tried to create a working workaround for collapse for menu vertically for both slide-int and slide-out.</p>
  
  <p>Thanks in advance.</p>