title: toggleClass() not working in Angular 4
body: <p>I've added <code>jQuery</code> in script and used </p>
  
  <pre><code> import * as $ from 'jquery';   
  </code></pre>
  
  <p>as well. I've also added <code>jQuery</code> in the HTML file. </p>
  
  <p>But my <code>toggleClass()</code> function is not working. When I checked the console, it didn't show any error. It was just empty.</p>
  
  <p>Below is my HTML and ts code:</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code> &lt;div class="web" (click) = "myFunc()"&gt;
      &lt;p&gt;
          Web Development&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
         $300
      &lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="design" (click) = "myFunc()"&gt;
      &lt;p&gt;
        Design &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
        $400
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="integration" (click) = "myFunc()"&gt;
       &lt;p&gt;
          Integration &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
        $20
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="training" (click) = "myFunc()"&gt;
      &lt;p&gt; 
       Training &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
        $500
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="total"&gt;
     Total &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
     $0
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>ts Code:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import * as $ from 'jquery';
  //declare var jquery:any;
  //declare var $ :any;
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    myFunc() {
      $(this).toggleClass("active");
    }
  }
  </code></pre>