title: How to add or remove a bootstrap "active" class in Angular 4, Typescript 2
body: <p>Am trying to adapt my Bootstrap Framework with Angular 4 - Typescript, and am having a little downturn in making my Tabbed Registration Form work.</p>
  
  <p><strong>In Bootstrap, here is the JS file</strong> that adds and remove active class upon click of my tabbed form.</p>
  
  <pre><code>$(document).ready(function(){
  $('.toggle').on('click', function() {
    $('.container').stop().addClass('active');
  });
  
  $('.close').on('click', function() {
    $('.container').stop().removeClass('active');
  });
  
  });
  </code></pre>
  
  <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
  &lt;!-- Mixins--&gt;
  &lt;!-- Pen Title--&gt;
  &lt;div class="pen-title"&gt;
    &lt;h1&gt;Material Login Form&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="card"&gt;&lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;h1 class="title"&gt;Login&lt;/h1&gt;
      &lt;form&gt;
        &lt;div class="input-container"&gt;
          &lt;input type="text" id="Username" required="required"/&gt;
          &lt;label for="Username"&gt;Username&lt;/label&gt;
          &lt;div class="bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="input-container"&gt;
          &lt;input type="password" id="Password" required="required"/&gt;
          &lt;label for="Password"&gt;Password&lt;/label&gt;
          &lt;div class="bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="button-container"&gt;
          &lt;button&gt;&lt;span&gt;Go&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="footer"&gt;&lt;a href="#"&gt;Forgot your password?&lt;/a&gt;&lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="card alt"&gt;
      &lt;div class="toggle"&gt;&lt;/div&gt;
      &lt;h1 class="title"&gt;Register
        &lt;div class="close"&gt;&lt;/div&gt;
      &lt;/h1&gt;
      &lt;form&gt;
        &lt;div class="input-container"&gt;
          &lt;input type="text" id="Username" required="required"/&gt;
          &lt;label for="Username"&gt;Username&lt;/label&gt;
          &lt;div class="bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="input-container"&gt;
          &lt;input type="password" id="Password" required="required"/&gt;
          &lt;label for="Password"&gt;Password&lt;/label&gt;
          &lt;div class="bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="input-container"&gt;
          &lt;input type="password" id="Repeat Password" required="required"/&gt;
          &lt;label for="Repeat Password"&gt;Repeat Password&lt;/label&gt;
          &lt;div class="bar"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="button-container"&gt;
          &lt;button&gt;&lt;span&gt;Next&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the TS File I tried to adapt to make the Tab work but all to no avail.</p>
  
  <pre><code>clicked(event) {
      event.target.classList.add('active'); // To ADD
      event.target.classList.remove('active'); // To Remove
      event.target.classList.close('click'); // To check
      event.target.classList.toggle('click'); // To toggle
    }
  </code></pre>
  
  <p>I know am wrong somewhere but I cant figure out why I cant make this to work, and it works well in Bootstrap 3 with JS.</p>