Develop Reference

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

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/

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.

Strange black background behaviour in ionic/angular application

I have just updated my app to ionic 5 and angular 9. I was hoping that this problem will disappear with the new version but it still persists. The issue is that in my app all are pages transitioning with a black screen before the real page comes in. So the user would see for like some millisecond a black screen, what really does not look nicely. Now with the new version things got even worse. In some pages I also experience the black boxes in the ion-refresher area or when opening the keyboard. As well when opening the new modals(in some its working properly in some not) But with the modals the black background even stays behind the modal. I really have no idea why this is happening. I also don't know if code helps here because its actually the same in both modals or also for refreshing content. I have made two pictures of an correct working modal and one with the black background.
I appreciate any help and if you need further code, let me know!
further code:
working modal:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button color="medium" (click)="dismiss()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title color="medium">
Privacy Policy
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="legal-content">
<p> ... </p>
</ion-content>
ts:
async showPrivacyModal() {
const modal = await this.modalController.create({
component: PrivacyPolicyPage,
presentingElement: this.routerOutlet.nativeEl,
swipeToClose: true
});
return await modal.present();
}
buggy modal:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button color="medium" (click)="dismiss()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title color="medium">
Black BG
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
ts:
async openFilter() {
const modal = await this.modalController.create({
component: FilterPage,
presentingElement: this.routerOutlet.nativeEl,
swipeToClose: true
});
return await modal.present();
}
Here the pictures:

Material expansion panel content - ng-template?

I have the following code, which I stole from here:
https://github.com/angular/material2/blob/master/src/demo-app/expansion/expansion-demo.html
<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-description>Click here to change view format.</mat-panel-description>
<mat-panel-title>View Controls</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
This is the content text that makes sense here.
<mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>
foo bar baz
<mat-action-row>
<button mat-button (click)="myPanel.expanded = false">CANCEL</button>
</mat-action-row>
</mat-expansion-panel>
One question - I am confused, because the content inside the <ng-template> tag does not display, however "foo bar baz" does display. So what is the purpose of the content inside <ng-template> and why is it not displaying?

<ng-template> doesn't render until you call it. Try this:
<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-description>Click here to change view format.</mat-panel-description>
<mat-panel-title>View Controls</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngTemplateOutlet="matExpansionPanelContent"></ng-container>
foo bar baz
<mat-action-row>
<button mat-button (click)="myPanel.expanded = false">CANCEL</button>
</mat-action-row>
</mat-expansion-panel>
<ng-template #matExpansionPanelContent> <-- Note the #hashtag
This is the content text that makes sense here.
<mat-checkbox>Trigger a ripple</mat-checkbox>
</ng-template>
This way you can build the <ng-template> once, and re-use it all of the place.

Ionic 2 Cannot view span inside of ion-item, how to render simple text

I'm not sure if I'm missing something, but when I try to add a span to a Ion Item the span is not rendered, nor div.
<ion-card>
<ion-card-title>
</ion-card-title>
<div>
<button ion-button (click)="toggleEdit()">Edit</button>
</div>
<ion-list>
<ion-card-content>
<ion-item [hidden]="editOptions.!isEditing">
<span class="inline-edit">Text</span>
<ion-label color="primary">{{label}}</ion-label>
<ion-input></ion-input>
<span class="inline-edit">{{value}} </span>
</ion-item>
<ion-item [hidden]="!editOptions.isEditing">
<ion-label color="primary">{{label}}</ion-label>
<ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input>
</ion-item>
</ion-card-content>
</ion-list>
</ion-card>
Ion label and Input display and work fine, but how when I try to use a span or a div in an Item they aren't rendering. Even when I inspect them in chrome.
How can I render simple text, Am I not allowed to use HTML in a component? What Is the Ionic 2 equivently for rendering small amounts of text, it appears labels have to always be over an input, so what component should I use?

That's because of how content projection works, the ion-item will only render some components (like the ion-label and the ion-input) but will ignore some other html elements.
There may be other ways to fix it, but AFAIK you have two choices:
1) If the text is just a small text , you can use notes.
A note is detailed item in an ion-item. It creates greyed out element
that can be on the left or right side of an item.
<ion-content>
<ion-list>
<ion-item>
<ion-note item-start>
Left Note
</ion-note>
My Item
<ion-note item-end>
Right Note
</ion-note>
</ion-item>
</ion-list>
</ion-content>
You can then play with the style rules to adapt it to your scenario.
2) Add the item-start, item-end, item-left, item-right or item-content attribute to the ignored html elements.
Attribute Description
item-start Placed to the left of all other elements, outside of the inner item.
item-end Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
item-content Placed to the right of any ion-label, inside of the input wrapper.
Please take a look at this plunker so you can play with those attributes until you get the desired layout.
<ion-item style="background: transparent;">
<span item-content class="inline-edit">Text</span>
<ion-label color="primary">Label</ion-label>
<ion-input></ion-input>
<span item-content class="inline-edit">Value</span>
</ion-item>

"IONIC 3" page adding html content variable

I am trying to add a variable containing html to my ionic 3 page
Ionic Page:
<ion-header>
<ion-navbar>
<ion-title>{{offeritem.data.nameprovider}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div>
{{offeritem.data.detailsoffer}}
</div>
</ion-content>
However I am getting the following
Result:
<p>The table contains 30 pieces:</p><ul><li>5 Philadelphia Roll</li>
<li>5 Fantasia Roll</li>
Please let me know what I am doing wrong in this case.
Thanks in advance

You should use [innerHTML] for ionic 3 like this:
<p [innerHTML]="yourVarHere"></p>

<span [innerHTML]="offeritem.data.detailsoffer"></span>
REF
Note the section on "Property binding or interpolation?"

import {DomSanitizationService} from '#angular/platform-browser';
class....{
public getSafehtml(html:string){
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
<ion-content padding>
<div [innerHTML]="getSafehtml(offeritem.data.detailsoffer)"></div>
</ion-content>
If you not bypassSecurityTrustHtml then your style will not work.