title: Rotate Angular - chevron - on click
body: <p>I am trying to rotate the chevron-left to chevron-right whenever they are clicked but with animation in Angular .</p>
  
  <p>CSS:</p>
  
  <pre><code>.rotate-chevron {
      transition: .1s linear;
    }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button   [class.button-open]="!slideOpen"
            [class.button-close]="slideOpen"
            (click)="changeSlide()"&gt;
      &lt;i class="rotate"&gt;{{slideOpen ? 'chevron_left' : 'chevron_right'}}&lt;/i&gt;
    &lt;/button&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>changeSlide(): void {
      this.slideOpen = !this.slideOpen;
    }
  </code></pre>
  
  <p>Here is a sample <a href="https://codepen.io/anon/pen/KYZeqJ?html-preprocessor=none" rel="nofollow noreferrer">codepen</a></p>