Ionic 4 Tag

Ionic 4.3 Lithium Out Now!

We got a release recently with fantastic updates to the Toast component as well as some much-desired bug fixes. Let’s dig in.

Lithium is the lightest metal and has many uses, like lubrication, medication, pyrotechnics, and electronics. The metal is so soft that it can be cut with a knife. Lithium does not typically occur in nature but comes from other Ionic compounds.

New Features

There are so many great updates to the Toast component we wanted to dub this release "Lithium Toast."

Toast Buttons

Toasts show subtle messages to the user, usually in response to feedback or as notifications, and typically go away on their own after a short time. Previously, however, you couldn’t do a whole lot with toasts but display some info and let the user dismiss it. In 4.3, you can now set buttons to add additional functionality to toasts.

The buttons can show text or an icon, have a side property that determines if they show at the start or end of the toast, and a handler that takes a function for custom logic.

pic courtesy: blog.ionicframework.com

Here is the sample code for the above:

async showToast() {
  const toast = await this.toastController.create({
    header: 'API Error',
    message: 'Error saving data.',
    buttons: [
      { icon: 'close', side: 'start' },
      {
        text: 'Retry?',
        side: 'end',
        handler: () => {
          toast.message = 'Retrying...';
          // remove the retry button
          toast.buttons.splice(1, 1);
          // simulate a retry
          setTimeout(() => {
            toast.message = 'Success!';
            toast.duration = 1500;
            // dismiss the toast in 2s
            setTimeout(toast.dismiss, 2000);
          }, 1000);
          // returning false so the toast doesn't dismiss
          return false;
        }
      }
    ]
  });
  await toast.present();
}

Toast Headers

Toast messages can now have headers as well.

In the above example, we specify a header as well as the toast message:

pic courtesy: blog.ionicframework.com

Bug Fixes

The slider component received some nice animation improvements and fixes in this release as well. We exposed animation events that can be passed in through the slide options to provide custom animations when swiping through the swiper component. See the Slides documentation for more details.

Angular devs will also be happy to know that the issue where the back button navigated back to the wrong tab has been fixed. Check out this PR for more details.

Some important bug fixes in this release surround datetime, and input label design. Check out the full release notes for a list of all the fixes.

For more Information and to build the app using Ionic, Hire Ionic Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the Hybrid mobile app using Ionic, please visit our technology page.

Source:

• blog.ionicframework.com

How to use the new Ionic CLI, and the new Router

With the new CLI in IONIC 4, we have the possibility to use console commands to create new pages, components, directives, and services. Let’s see some examples:

Create page:

ionic g page User

Create a new Service:

ionic g service Item

Navigation on Ionic 4

There are great changes in the navigation and the Router, which in our opinion makes it much simpler and more understandable. Ionic 4 now uses the Angular Router.

Ionic 3 used navigation based on a simple stack where the new pages were placed on top of the stack doing push and when we wanted to navigate backward we simply made a pop of the last page.

Traditional websites use a linear history, which means that the user navigates to a page and can press the Back button to navigate. In Ionic Framework, applications can take this a step further by allowing parallel navigation. Which means that it is possible to have multiple navigation batteries and exchange them at any time. An example of this would be having navigation with tabs on one page and another with a side menu.

Something important to mention is that NavController and ion-nav in Ionic 4 have become obsolete. You can still use them, but only if your application does not use Lazy Loading.

Instead of ion-nav and NavController, Ionic 4 now uses @ angular/router.

As we already said, when creating an angular type application, Ionic 4 uses the navigation of Angular 6. That is why when creating our ionic 4 application of angular type we are automatically created an app-routing.module.ts file located in src/app.

Let’s see what this file has and what are the differences with an application in Ionic 3.

In Ionic 4:

    import {NgModule} from '@ angular / core'; 
    import {Routes, RouterModule} from '@ angular / router';
    const routes: Routes = [ 
      {path: '', redirectTo: 'home', pathMatch: 'full'}, 
      {path: 'home', loadChildren: './pages/home/home.module#HomePageModule'}, 
    ] ;
    @NgModule ({ 
    imports: [RouterModule.forRoot (routes)], 
    exports: [RouterModule] 
    })
    export class AppRoutingModule {}

To navigate to the HomePage we must do the following:

    import {Router} from '@ angular / router';
    constructor (private router: Router) {}

    navigateToHome () { 
      this.router.navigate (['/ home']); 
    }

In Ionic 3:

    import {NavController} from 'ionic-angular'; 
    import {HomePage} from './pages/home/home'
    constructor (public navCtrl: NavController) {}
    navigateToHome () { 
      this.navCtrl.push (HomePage); 
    }

It is important to understand that in Ionic 4, navController is no longer used to navigate the application.

Example navigation on Ionic 4

Let’s take a step further and see how to pass information between two pages in Ionic 4.

// item is an object of the style: {title: 'Some title', description: 'Some description'}
itemSelected (item) { 
  this.router.navigate (['/ home', item]); 
}

Then, to obtain the item object in our HomePage, we use the ActivatedRoute.

import {ActivatedRoute} from '@ angular / router';
export class HomePage implements OnInit { 
item: any; 
constructor (private route: ActivatedRoute) {} 

ngOnInit () { 
   this.route.params.subscribe (data =>; { 
     this.item = data; 
   }) 
} 
}

Life cycles of navigation (LifeCycles)

The lifecycles (known as lifecycles in English) that were used in Ionic 3 as for example ionWillLoad will no longer be used in Ionic 4. Now we will use the Angular life cycles such as ngOnInit and ngAfterViewInit.

routerLink

In Ionic 3 the event (click) is used to navigate between pages from the html. In Ionic 4 we will use the routerLink, as it is used in the Angular applications.

An example would be:

<ion-button [routerLink] = "['/ product / 123']"> Go to Product 123 </ ion-button>

Modules

It is important to mention that it is no longer necessary to import the pages and services in the app.module.ts file, which in our opinion makes the project much simpler and more organized.

For each page, there will be a module of that page. For example, if we want to use Reactive Forms on any page, we only import ReactiveFormsModule on the page or pages that will use it.

The code below is from the src / app / pages / new-item / new-item.module.ts of our example application in Ionic 4 that you can download for free.

import {NgModule} from ' @ angular / core '; 
import {CommonModule} from ' @ angular / common '; 
import {FormsModule, ReactiveFormsModule} from ' @ angular / forms '; 
import {Routes, RouterModule} from ' @ angular / router ';
import {IonicModule} from ' @ ionic / angular ';
import {NewItemPage} from './new-item.page';
const routes: Routes = [ 
  { 
    path: '', 
    component: NewItemPage 
  } 
];
@NgModule ({ 
  imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    IonicModule, 
    RouterModule.forChild (routes) 
  ], 
  declarations: [NewItemPage] 
}) 
export class NewItemPageModule {}

For more Information and to build the app using Ionic, Hire Ionic Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the Hybrid mobile app using Ionic, please visit our technology page.

Source:

• medium.com