Tribalyte Technologies Tribalyte Technologies
  • Home
  • Mission & Vision
  • Our experts
  • Our software solutions
  • Business cases
  • Blog
  • Contact us
  • Español
Tribalyte Technologies Tribalyte Technologies
  • Home
  • Mission & Vision
  • Our experts
  • Our software solutions
  • Business cases
  • Blog
  • Contact us
  • Español
Mar 08

Ionic 4 (part 2)

  • March 8, 2019
  • Lucie Wu
  • No Comments
  • Uncategorized

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.

image 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.

image 2

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.

image 3

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:

image 4

 

 

 

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.

image 5

figure 2-1 add new toggle button display

image 6

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:

image 7

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,

image 8

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!

  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Lucie wu is a software engineer at Tribalyte, also with a mathematical finance background. She is engaged in software development and blockchain based on TypeScript, Angular and lonic. Combining economy and technology is her pursuit.

Leave a reply Cancel reply

Your email address will not be published. Required fields are marked *

A company dedicated to developing and improving global tech platforms.

Contact

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

HELP

  • Privacy policy
  • Quality Policy
  • Terms of use

CERTIFICATIONS

⠀⠀⠀⠀⠀⠀⠀⠀⠀

Internationalization

Tribalyte Technologies S.L. has obtained aid C007/20-ED from Red.es to drive and promote R&I activities and to encourage business investment to develop the iPatia project. Likewise, we highly value the contribution of the ERDF, the leading fund of the European cohesion policy, for what it means to boost our work and consequently to economic growth and job creation in this region and Spain as a whole.
This website uses cookies to improve your user experience and gather anonymous usage statistics. Accept More information