title: Angular 2 Toggle Views On Click
body: <p>I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript. </p>
  
  <p>in my component.ts file </p>
  
  <pre><code>  public showEquifax:boolean = true;
    public showExperian:boolean = false;
    public showTransunion:boolean = false;
  </code></pre>
  
  <p>Then in my html file </p>
  
  <pre><code> &lt;div class="btn-group" role="group" aria-label="Credit Report Navigation"&gt;
                      &lt;button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary"&gt;Equifax Report &lt;/button&gt;
                      &lt;button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary"&gt;Experian Report &lt;/button&gt;
                      &lt;button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary"&gt;Transunion Report &lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Based on this logic how can I change the <code>boolean</code> value of the functions to <code>false</code> when the link clicked value gets changed to <code>true</code></p>
  
  <p>I tried to do something like this,</p>
  
  <pre><code>public showEquifax() {
      showExperian() = false;
      showTransunion() = false;
      return true;
  }
  </code></pre>
  
  <p>But I get an error for left-hand side assignment expression. </p>
  
  <p>How can I write each of these boolean functions to change the others to false when the current function is set to true?</p>