title: Angular : Two exclusive Toggle-Switchs not working
body: <p>I'd like to implement two toggle-switchs that are exclusive : if the first is on, the second should be off, and vice versa. I'm using a jquery toggle switch. The classes toggle-on and toggle-off control the behavior of each swith.<br>
  Here the main parts of my code :</p>
  
  <p><a href="https://codepen.io/changuelsami/pen/ELQOWq" rel="nofollow noreferrer">Run Code on CodePen</a></p>
  
  <pre><code>  happy:boolean:true;
    changeAction() {
      console.log("Before ", this.happy)
      this.happy = ! this.happy;
      console.log("After ", this.happy)
    }
  </code></pre>
  
  <p>The template for the 1st switch : </p>
  
  <pre><code>&lt;div class="toggle-switch" [class.toggle-on]="happy" [class.toggle-off]="!happy" (click)="changeAction()"&gt;
  </code></pre>
  
  <p>And the one for the seconde one : </p>
  
  <pre><code>&lt;div class="toggle-switch" [class.toggle-on]="!happy" [class.toggle-off]="happy" (click)="changeAction()"&gt;
  </code></pre>
  
  <p>The code seems to be ok : the variable "happy" is set to "true", so the first switch is on, the second is off.</p>
  
  <p>The problem is when I check an answer, the two options become ON (or OFF) and then they seem to be linked ! The debug message seems ok, but the result is not ! What's wrong with my code ?</p>
  
  <p>Thanks :)</p>