JSFiddle - React, Tailwind, and code Playground

HTML

<ion-header>
      <ion-toolbar class="toolbar-color">
        <ion-title>Views</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-grid>
        <ion-row>
          <ion-col>
            <div class="ion-text-start">
              <ion-item>
                <ion-label>Switch to table view</ion-label>
                <ion-toggle (click)="showTable()"></ion-toggle>
              </ion-item>
            </div>
          </ion-col
        </ion-row>
        <ion-row>
          <ion-col>
            <app-tableview hidden="true" id="tableview"></app-tableview>
            <canvas height="200" #lineCanvas></canvas>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>

TypeScript

showTable() {
    if (this.tableHidden === true) {

      this.tableHidden = false;
      document.getElementById("tableview").hidden = false;
      

    } else if (this.tableHidden === false) {

      this.tableHidden = true;    
      document.getElementById("tableview").hidden = false; 
   
    }

  }