Learn

Learning Timeline

ionic 4 vs ionic 3

Big difference overall in terms of handling syntax.

You have to use Angular Routing tool for navigating the web pages in ionic.

Issues

Navigate Button Not appearing

Navigation stack doesn't have the button being displayed. Use this code in <ion-toolbar>

<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>

ionic 3 - 4 folder structure

Most of the folders have moved to "app" parent directory.

     V3                 V4
/src/pages ->      /src/app/pages
/src/models ->     /src/app/models
/src/providers ->  /src/app/providers

typescript object initialization

We would check two methods described while initializing objects in Typescript.

1st Method

Variable object which hasn't been initialize at start or constructor would have error if you try to directly replace data.

class expC {
     productData2: { name: string, quantity: number };

onInit() {
     this.productData2 = { name: "Kautilya", quantity: 577 };
}

}

2nd Method

So you would have to define null in the objects where it is defined. So it won't have the error.

error : Uncaught (in promise):
        // TypeError: Cannot set property 'name' of undefined

class expC {
     productData2: { name: string, quantity: number } = { name: null, quantity: null };

onInit() {
     // Two ways to access values of object
     this.productData2.name = "Sensehack";
        this.productData2['quantity'] = 7584;
}

}