How to add or remove a bootstrap "active" class in Angular 4, Typescript 2

Question

Am trying to adapt my Bootstrap Framework with Angular 4 - Typescript, and am having a little downturn in making my Tabbed Registration Form work.

In Bootstrap, here is the JS file that adds and remove active class upon click of my tabbed form.

$(document).ready(function(){
$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

});

HTML File

<div class="container">
    <div class="row">

<!-- Mixins-->
<!-- Pen Title-->
<div class="pen-title">
  <h1>Material Login Form</h1>
</div>
<div class="container">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Go</span></button>
      </div>
      <div class="footer"><a href="#">Forgot your password?</a></div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle"></div>
    <h1 class="title">Register
      <div class="close"></div>
    </h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Repeat Password" required="required"/>
        <label for="Repeat Password">Repeat Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Next</span></button>
      </div>
    </form>
  </div>
</div>
    </div>
</div>

Here is the TS File I tried to adapt to make the Tab work but all to no avail.

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
  }

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.

Answer 1

Do it like this

<div class="container" [ngClass]="{'active': containerActive}">

And on the ts

First instantiate the variable:

containerActive=false

And change it whenever you want to.

clicked(event) {
     this.containerActive=!this.containerActive
}

more information about ng-class

Answer 2

Use ngClass with a condition.

Updated to answer user's question in the comments area

You can use Angular's (click) listener to call a function so you won't need the jQuery. In the example below, when the element (button or whatever it is...) is clicked then the handleClick() function will fire in the Typescript and will have the event. You can find your property in the event and use it to determine what you want to do to control the ngClass class.

HTML

<button ngClass="{'active': mychoice}" (click)="handleClick($event)">
  // Some code here
</button>

Typescript

mychoice = false; // true if you want the class at first

handleClick(event) {
    let some_case = event.something
    if (some_case === conditionToAdd) {
       this.mychoice = true;           // case to add
    } else {
    if (some_case === conditionToToggle) {
       this.mychoice = !this.mychoice; // case to toggle
    } else {
       this.mychoice = false;          // case to remove
    }
 }

Answer 3

You can use ngClass like said aboved, and you can use if it is the only class you need

<div class="container" [class.active]="containerActive">

Answer 4

Okay. I figured out I can still use jQuery right inside Angular if Bootstrap could actually integrate well with Angular.

So for anyone trying to still make jQuery events work with Angular, here is what I have done to make it work for me.

In my HTML file, I added a click event to the tab I want to toggle

<div class="card alt" (click)="toggleEvent()">
..
..
</div>

In my TS File I added jQuery this way:

declare var jquery: any;
declare var $: any;

export class AppComponent {
  title = 'Angular App';

  toggleEvent() {
    $('.toggle').on('click', function() {
      $('.container').stop().addClass('active');
    });
    $('.close').on('click', function() {
      $('.container').stop().removeClass('active');
    });

  }

}

What this jQuery will do is add class active to class toggle defined in the HTML, and when I close it, it removes the class active.

So my traditional Bootstrap 3 or 4 Framework can still work hand in hand with Angular.

I hope that helps someone to execute tasks as fast as possible instead of refactoring JS,jQuery into Typescript paradigm.

However, note that Bootstrap, and jQuery must have been integrated with Angular through .angular-cli.json file in your Angular directory, after you must have initially installed bootstrap through npm install bootstrap@3. So your style and scripts line in .angular-cli.json becomes:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
......