How to switch from graph view and tableview with a toggle button in Ionic 6/Angular?

Issue

I have two components to show data. The table view and the graph view. Both components has the same data. I use a toggle switch button to switch between these views. This is my code:

<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>

The default view is the graphview via chart.js. Both components works fine. This is my code to hide and show:

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; 
   
    }

  }

When I click on the toggle switch it doesn’t hide the graphview but it shows the table view among each other. I have tried the visibility from this post but doesn’t work.

JavaScript hide/show element

How can I switch between the components and show only view?

JSFiddle link: https://jsfiddle.net/f8a3wgxb/

Solution

An example based off @alex87’s comment:

<ng-container *ngIf="!tableHidden">
    <app-tableview id="tableview"></app-tableview>
</ng-container>
<ng-container *ngIf="tableHidden">
    <canvas height="200" #lineCanvas></canvas>
</ng-container>

Doesn’t have to be an ng-container, but that Angular-only tag will not add anything to the DOM. You can always use a or anything else to do just the same…
You can also neaten it up by using an *ngIfElse…
https://angular.io/api/common/NgIf

Note: I tend to go overboard in my tag wrapping, thus the ng-containers, but *ngIf is typically available on almost all tags, as is hidden – per your usage.

Edit: Fixed the hidden variable name – I was lazy and didn’t go back up to find what exactly you’d called it.

Edit #2: You can tidy up and minimise your setting of the hidden variable, instead of needing the if/else.

// This toggles between true/false
this.tableHidden = !this.tableHidden;
document.getElementById("tableview").hidden = !this.tableHidden; 

Reduced to only two lines.

Answered By – Krenom

Answer Checked By – Timothy Miller (FlutterFixes Admin)