title: Angular 2 Slide Up and Down Animation
body: <p>I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with "Read more" and "Read Less" links. Not on the basis of the character count but on the basis of the specified max height.</p>
  
  <pre><code>import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
  
  @Component({
      selector: 'read-more',
      template: `
          &lt;div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'"&gt;
          &lt;/div&gt;
              &lt;a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed"&gt;Read {{isCollapsed? 'more':'less'}}&lt;/a&gt;
      `,
      styles: [`
          div.collapsed {
              overflow: hidden;
          }
      `]
  })
  export class ReadMoreComponent implements AfterViewInit {
  
      //the text that need to be put in the container
      @Input() text: string;
  
      //maximum height of the container
      @Input() maxHeight: number = 100;
  
      //set these to false to get the height of the expended container 
      public isCollapsed: boolean = false;
      public isCollapsable: boolean = false;
  
      constructor(private elementRef: ElementRef) {
      }
  
      ngAfterViewInit() {
          let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
         //collapsable only if the contents make container exceed the max height
          if (currentHeight &gt; this.maxHeight) {
              this.isCollapsed = true;
              this.isCollapsable = true;
          }
      }
  }
  </code></pre>
  
  <p>And used like:</p>
  
  <pre><code>&lt;read-more [text]="details" [maxHeight]="250"&gt;&lt;/read-more&gt;
  </code></pre>
  
  <p>The component works well. Now I need to add some slide up/down animation to the component so that when Read More link is clicked the contents slide down and when Read less is clicked, the contents slide up to specified max height.</p>
  
  <p>Can anyone please guide how to achieve this?</p>