Angular 2 Toggle Views On Click
<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>