0

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/

Fearcoder
  • 753
  • 3
  • 15
  • 47
  • Rather than directly manipulating the dom, why don't you use the `*ngIf` directive? – alex87 Jun 27 '22 at 04:46
  • Hello Alex, thank you for your time. I think you mean something like `*ngIf="!Showtable"`? I have tried, but I think I am using it wrong. Do you have an example ? – Fearcoder Jun 27 '22 at 06:49

1 Answers1

1

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.

Krenom
  • 1,894
  • 1
  • 13
  • 20
  • Thank for your time. I think you mean `ngIf="tableHidden "`. When I open the app it doesn't render my graph anymore (chartjs). When I toggle the switch I can hide and show the table, but not switching between the table and graph. – Fearcoder Jun 27 '22 at 13:40
  • I have fixed it by this ` ` – Fearcoder Jun 27 '22 at 13:42