I am currently working on an Ionic 4 project. I have data in a button named button1 in the side menu. I want to display the data of that button in a separate page named tab1. How can I do this in Ionic 4 framework?
Ps: I have data arriving in button1. I want the same data to be displayed in the page tab1
Try this :
pushTab(params: any) {
this.navCtrl.push(Tab1Page,params);
}
And in your tab page :
constructor(public navCtrl: NavController,
public navParams: NavParams){
var data = navParams.data;
}
Related
In my ionic project I have 3 pages: HomeScreen, SearchPage & ScannerPage.
I navigate to SearchPage & ScannerPage from my HomeScreen via a routerlink as in my examples below:
<ion-button routerLink="/manual-qr-search" color= "tertiary" expand="block">Check Out</ion-button>
<ion-button disabled={{this.myService.getTempCardDisabled()}} routerLink="/manual-temperature-scanner" color= "primary" expand="full" class="flex-child"><ion-icon name="keypad-outline"></ion-icon>MANUAL</ion-button>
and I navigate back to the HomeScreen from my SearchPage using the android back button as follows:
this.platform.backButton.subscribeWithPriority(99999, () => {
this.router.navigate(['home-screen']);
});
and I navigate back to the HomeScreen from my ScannerPage using the android back button as follows:
this.platform.backButton.subscribeWithPriority(99999, () => {
this.router.navigate(['home-screen']);
});
My problem is the HomeScreen's ngOnInit() hits when I navigate from SearchPage but it doesn't hit when I navigate from ScannerPage and I want to know why.
I do not call ngOnDestroy() at all on any page.
I can put in a check to see when I navigate from another page so that the code inside the HomeScreen's ngOnInit() doesn't hit when I don't want it to but I feel like that is bad programming.
you can do the following if you want to check for event on page navigation change.
import { ActivatedRoute } from '#angular/router';
public class yourClassName{
constructor( private route: ActivatedRoute){
this.route.queryParams.subscribe((params) => {
// Do things when page changes routes
})
}
}
I have noticed that I had 2 paths set to my HomeScreen in my app-routing.module.ts folder which caused it to act this way. I added another route to call on ionViewWillEnter() and forgot to comment out the previous route.
I have a multiple charts in my page and I'm trying to make a delete call but some reason my chart UI is not updating immediately when I click the delete button. I always need to refresh the browser in order to see the changes.
I uploaded the full code for this two component her https://stackblitz.com/edit/angular-ivy-nnun96 so I would be really appreciated if I can get any suggestion on how to make the UI remove the Chart immediately when the user press Delete button.
Mc Chart List TS
deleteChart(){
this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
console.log(deleted);
});
}
Mc Chart List HTML
<button mat-menu-item (click) = "deleteChart()" *ngIf = "chart.hasAccess && chart.canEdit && !chart.isPublished">Delete Chart</button>
Parent HTML
<mc-chart-list [chart]="chart" [editMode]="true" [wsType]="workspace.type"></mc-chart-list>
Parent TS
ngOnInit(): void {
this.charts = this.workspace.charts;
}
It look like this right now
You can use ChangeDetectorRef to detect changes on the view.
import {ChangeDetectorRef} from '#angular/core';
constructor(private ref: ChangeDetectorRef)
deleteChart(){
this.chartService.deleteChart(this.chart.guid).subscribe((deleted) => {
console.log(deleted);
this.ref.detectChanges();
});
}
Note: Remove changeDetection: ChangeDetectionStrategy.OnPush (if you are using it)
When I go to a new routing page in HTML, how do I reload the new page in HTML?
<button ion-button routerLink="/desiredRoute" routerDirection="root">
edit:
I am trying to pass variables from another page.
Page1.ts: variables I want variables from
Page2.ts: variables I want to display from page1
If I load page 2, then go into page1 and change the variables, Page2 variables don't change unless I reload.
Solved:
added this to my .ts
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.route.params.subscribe(
params => {
/*Update Variables here*/
}
);
}
keep in mind, any variables you set in one page, are not going to be available in the second page after you route. you have 2 possible solutions:
1) Use queryParams to pass basic strings or numbers as variables through your route, which will show up on the url and can be parsed. (usually to pass an itemId or something very simple)
2) set variable values using localStorage, and then look them up after routing.
I'm having some difficulty getting some data to be shown the first time a page is loaded on an ionic app.
What I want to happen is for a user to click a link of the menu, the page to load and data to instantly be displayed. But whats happening is nothing is shown the first time the page is loaded, but if you re-click the link from menu data will be displayed.
My code is -
export class ViewSessions {
lastScans = [];
ionViewWillEnter(){
this.barcodeTracker.lastScans = this.barcodeTracker.getScans();
}
constructor(private barcodeScanner: BarcodeScanner, private
nativeStorage: NativeStorage, private barcodeTracker: BarcodeTracker,
private storage: Storage) {
this.lastScans = this.barcodeTracker.getScans();
}
}
I think what is happening is the array is only being created the first time the page is loaded. Then populated the second time its loaded. So I tried to create the array on the home-page which is loaded with the app, then adding data to this array when this page is loaded and showing the array from home-page in the html, but this was unsuccessful.
Edit -
This is the getScans function that is being called -
public getScans(){
console.log(this.data);
return this.data;
}
In a Xamarin Forms project, I have created a TabbedPage inside which I have added 5 child navigation pages.
{
Children.Add(new NavigationPage(new A()));
Children.Add(new NavigationPage(new B()));
Children.Add(new NavigationPage(new C()));
Children.Add(new NavigationPage(new D()));
Children.Add(new NavigationPage(new E()));
}
When I click manually on a tab B from Tab A; B's OnAppearing method is called as expected. However when I programmatically change the tab using
tabbedPage.CurrentPage = tabbedPage.Children[index]
Then B's OnAppearing method is called never. This is happening on UWP.
As of Xamarin Forms 3.4.0.1008975 and UWP 6.1.5 this still appears to be an issue. I solved it like this:
Make an interface called IAppearable:
internal interface IAppearable
{
void HandleAppearing();
}
Have your content page implement this interface:
public partial class MyContentPage : ContentPage, IAppearable
In HandleAppearing do what you would have done in OnAppearing:
public void HandleAppearing()
{
// do appearing stuff here
}
After you programmatically set your tab page use this code:
CurrentPage = Children[pageIndex];
if (Device.RuntimePlatform == Device.UWP)
{
if (CurrentPage is IAppearable appearablePage)
{
appearablePage.HandleAppearing();
}
}