title: Adding and removing class click function in Angular 2 Service
body: <p>I'm trying to use CSS3 animation in my template, but I'm trying to find a away to add and remove class using <code>(click)='function()'</code> like jQuery way.</p>
  
  <p>Question is how can I do the function below which is a jQuery in Angular 2?</p>
  
  <p>This is what I have at the moment in my <code>SharedService</code>. I believe that you can't use <code>Renderer</code> angular core component in the service. Reason this is in a service is so other components can use it.</p>
  
  <pre><code>openBasketView() {
   $('#basketView').removeClass('fadeOutRight');
   $('#basketView').addClass('fadeInRight');
  }
  closeBasketView() {
   $('#basketView').removeClass('fadeInRight');
   $('#basketView').addClass('fadeOutRight');
  }
  </code></pre>
  
  <p>Rather than using something like -- I like using <code>function</code> in <code>(click)</code> event is better and readable as all logic is in a block function.</p>
  
  <p>component boolean</p>
  
  <pre><code>public showThis: Boolean = false;
  </code></pre>
  
  <p>template view</p>
  
  <pre><code>&lt;div class="basket animated" [ngClass]="{'myClass': showThis}"&gt; &lt;/div&gt;
  &lt;button (click)="showThis = !showThis"&gt;&lt;/button&gt;
  </code></pre>