Hi guys! Welcome to Ionic 4 again! As you may know, Ionic is an open source mobile application development framework that makes it easy to build high quality cross-levels mobile applications using web technologies, such as mobile apps, mobile web pages, mixed app web pages, and so on. The latest version of Ionic is Ionic 4, which we have made an introduction about some of its main characteristics in previous blog.
You can find the blog “Ionic 4 (part 1) – Introduction” in this link:
https://tech.tribalyte.eu/bolg-ionic-4-parte1-introducion
In this issue, we will tell you something more detailed about Ionic 4.
1. Ionic 4 Creating Page and Page Jump
1.1 Creating page in Ionic 4 is similar to that in Ionic 3. Just use “ionic g page pageName”, as in figure 1-1.
figure 1-1 creating the button page in Ionic 4
1.2 After completing creating the page, we now have a button directory contained in src directory, as in figure 1-2. The button directory is a page as well as a module.
figure 1-2 the button page(module)
1.3 If we want to write an button in tab1 which can be clicked to jump to the button page, we can use Angular Router, as in figure 1-3. The route in Ionic 4 is totally based on Angular, and the methods are virtually the same with those in Angular.
figure 1-3 jump to the button page
1.4 In Ionic 4, jumping to another page won’t add the back button by default. Therefore, if we want to add a back button in button page, we need to add “ion-back-button” in the ion-header.
2. Ionic 4 Adding a New Bottom Tab Toggle Button
2.1 Create the tab4 module like “ionic g page tab4”.
2.2 Change the routing configuration in app-routing.module.ts, and remove the routing added by default, like:
2.3 Add the new bottom tab toggle button in tabs.page.html as in figure 2-1, and figure 2-2 shows the effect.
figure 2-1 add new toggle button display
3. Page Migration in Ionic 4
3.1 First, create a page corresponding to the original project such as a login page, with a command “ionic g page pages/ logIn”.
3.2 This will generate a log-in folder in the src/app/pages directory, which contains 5 files. Compared to Ionic 3, in addition to the file naming difference, there is one more test file in Ionic 4.
Compare the main structure of log-in.ts in Ionic 3 and log-in.page.ts in Ionic 4:
figure 3-1 the difference of main structure between Ionic 3 and Ionic 4
The overall difference is not big, the main difference is in the @Component part, the name of the selector, the reference to the template file and the style file. The @IonicPage part in Ionic 3 is removed in Ionic 4, and some functions are placed in the Angular Router.
4. Standardization of components in Ionic 4
Because of using the Web Components Standardization, lots of components and attributes in Ionic 4 has changed. For example,
figure 4-1 the difference of attributes between Ionic 3 and Ionic 4
In addition to the button tag replaced by ion-button, many properties have also changed, for example all the properties of the button the button’s have been replaced, and item-start has been replaced by solt = “Start”, in addition to the use of radio-group has also changed a lot. Due to a lot of usage changes, the specific migration is corresponding to the official document.
We hope that this second part has made you know a little more Ionic4. Do you have more interesting findings about Ionic 4? Looking forward to your comments!
