title: Toggling showing and hiding between two elements
body: <p>I have a tabs nav element that has two tabs, it needs to show a component based on what tab was clicked and hide the other component.  If the clicked tab is already "active", the component needs to remain showing.</p>
  
  <p>I have this working, but it seems very inefficient to me.  Can anyone show me a better way to do this?</p>
  
  <p>Here's how I have it set up now.  For the sake of not posting every file in the question, know that the project is set up correctly.</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;button type="button" (click)="changeShowStatus(oneShowing=true,twoShowing=false)"&gt;1&lt;/button&gt;
        &lt;button type="button" (click)="changeShowStatus(twoShowing=true,oneShowing=false)"&gt;2&lt;/button&gt;
        &lt;div class="box1" *ngIf="oneShowing"&gt;
          &lt;p&gt;some content&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="box2" *ngIf="twoShowing"&gt;
          &lt;p&gt;some content2&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    oneShowing:boolean;
    twoShowing:boolean
  
    constructor() {
      this.oneShowing = true;
      this.twoShowing = false
    }
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/8BmzHPULt2wTwXrQUnfh?p=preview" rel="nofollow noreferrer">Plunker</a></p>