App Development 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

Migrating from Ionic 3.0 to Ionic 4.0

The migration from Ionic 3 to Ionic 4 is the most significant in the frameworks history, and it sets a course for Ionic that likely will not be deviated from for years to come.

We suggest the following general process when migrating an existing application from Ionic 3 to 4:

1. Generate a new project using the blank starter
2. Copy any Angular services from src/providers to src/app/services
   • Services should include { providedIn: 'root' } in the @Injectable() decorator.
3. Copy the app’s other root level items (pipes, components, etc) keeping in mind that the directory structure changes from src/components to src/app/components, etc.
4. Copy global Sass styling from src/app/app.scss to src/global.scss
5. Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:
   • Emulated Shadow DOM is turned on by default
   • Page/component Sass should no longer be wrapped in the page/component tag and should use Angular’s styleUrls option of the @Component decorator
   • RxJS has been updated from v5 to v6
   • Certain lifecycle hooks should be replaced by Angular’s hooks
   • Markup changes may be required

In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. For example: ionic g service weather will create a shell Weather service and test. The code can then be copied from the older project with minor modifications as needed. This helps to ensure proper structure is followed. This also generates shells for unit tests.

Changes in Package Name

In Ionic 4, the package name is @ionic/angular. Uninstall Ionic 3 and install Ionic 4 using the new package name:

    $ npm uninstall ionic-angular
    $ npm install @ionic/angular

While migrating an app, update the imports from ionic-angular to @ionic/angular.

Project structure

One of the major changes between an Ionic 3 app and an Ionic 4 app is the overall project layout and structure. In v3, Ionic apps had a custom convention for how an app should be setup and what that folder structure should look like. In v4, this has been changed to follow the recommended setup of each supported framework.

For example, if an app is using Angular, that project structure will be exactly what an Angular CLI app would be. This change, while not too difficult to accommodate, helps to keep common patterns and documentation consistent.

The above comparison is an example of a v4 app’s project structure. For developers with experience in a vanilla Angular project, this should feel really familiar.

There is a src/ directory that acts as the home for the app. This includes the index.html, any assets, environment configuration, and any app specific config files.

While migrating an app to take advantage of this new layout, it is suggested that a new project “base” is made with the CLI. Then, with the new project layout, migrate the features of the app piece by piece. Pages/components/etc. should be moved into the src/app/ folder.

Ensure your Ionic configuration file has the appropriate type. The project type for v3 is ionic-angular. The project type for v4 is angular. If this value is incorrect, the CLI may invoke the incorrect build scripts.

See the following ionic.config.json as an example:

{
  "name": "my-app",
  "type": "angular"
}

RxJS Changes

Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see the RxJS Migration Guide for details.

Lifecycle Events

With V4, we’re now able to utilize the typical events provided by Angular. But for certain cases, you might want to have access to the events fired when a component has finished animating during it’s route change. In this case, the ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, and ionViewDidLeave have been ported over from V3. Use these events to coordinate actions with Ionic’s own animations system.

Older events like ionViewDidLoad, ionViewCanLeave, and ionViewCanEnter have been removed, and the proper Angular alternatives should be used.

Overlay Components

In prior versions of Ionic, overlay components such as Loading, Toast, or Alert were created synchronously. In Ionic v4, these components are all created asynchronously. As a result of this, the API is now promise-based.

// v3
showAlert() {
  const alert = this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  alert.present();
}

In v4, promises are used:

showAlert() {
  this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  }).then(alert => alert.present());
}

// Or using async/await

async showAlert() {
  const alert = await this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  await alert.present();
}

Lazy Loading

Since Navigation has changed, the mechanism for lazy loading has also changed in V4.

In v3, a typical lazy loading setup worked like this:

// home.page.ts
@IonicPage({
  segment: 'home'
})
@Component({ ... })
export class HomePage {}

// home.module.ts
@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)]
})
export class HomePageModule {}

However, in v4, lazy loading is done via the loadChildren method of the Angular router:

// home.module.ts
@NgModule({
  imports: [
    IonicModule,
    RouterModule.forChild([{ path: '', component: HomePage }])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    RouterModule.forRoot([
      { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ])
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Markup Changes

Since v4 moved to Custom Elements, there’s been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a dedicated file on Github.

To help with these markup changes, we’ve released a TSLint-based Migration Tool, which detects issues and can even fix some of them automatically.

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:

• ionicframework.com

Ionic 4 is here – Comparison Between Ionic 4 Vs Ionic 3

After more than a year of work, the Ionic Framework team has released version 4. The new version offers us significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions), new documentation and many other improvements that we will analyze in this article.

Surely you will have many doubts — and perhaps fear — about this version change. But the good news is that despite the great improvements offered by Ionic 4, migrating from Ionic 3 to Ionic 4 is super simple!

In this article, we want to explain the comparison between Ionic 4 and Ionic 3, as well as the novelties and new concepts of this new version. Let’s see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end, we will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

Web Components

Ionic Framework 4 was completely rewritten to use the Web APIs and each component is packaged as a Web Component. This allows the framework to be projected into the future. To help create the Web Components, the team created a tool called Stencil.

What are Web Components?

Web components are a set of web APIs that allow you to create HTML tags that are reusable and encapsulated.

One way to explain the Web Components is to imagine them as reusable user interface widgets that are created using open web technologies. They are part of the browser, and therefore do not need external libraries.

With Web Components, you can create almost anything that can be done with HTML, CSS, and JavaScript. In this way, you can create a portable component that can be easily reused.

Web components make the browser the one who does more work and in this way, they provide important improvements in the performance and load times of modern applications.

The Web Components are based on the following specifications:

• Custom Elements: defines the bases and the fundamentals to design and use new types of DOM elements.
• Shadow DOM: defines how to use encapsulated styles and code within a web component.
• HTML imports: basically defines how to include and reuse the HTML document in another HTML document.
• HTML Template: defines how to declare code fragments that will not be used while the page is loading but could be later instantiated at runtime.

Compatibility with other Frameworks

Since its inception, Ionic Framework was built using Angular. But now with the popularity and support of web components, this has changed.

One of the great changes of this new version of Ionic is that it is completely independent of the base framework (previously this place was occupied only by Angular).

Since the components of the Ionic Framework, such as <ion-button>, are now encapsulated as Web Components, it is no longer necessary to bind to a base framework. Web components work with any framework, in fact, if you prefer you can not use any Framework.

What the Ionic Framework team intends with this change is that Ionic is a UI Framework that can work with whatever technology the programmers choose. This opens the door to future applications that can be created in Vue or in React using the Ionic web components.

Ionic CLI on Ionic 4The CLI 4.0 has been totally improved both in the features it offers and in its speed and ease of use.

In order to use it, we must have the latest version of the CLI in our development environment. We can install it by running the following command:

npm install -g ionic @ latest

To use the latest version of the CLI we must have installed node 8.9 or higher.Visit https://nodejs.org/ to find instructions on how to update Node.js.

Once the new CLI is installed, we can now create our first application with ionic 4. Running the following command, the CLI will create a new application with the basic structure of Ionic 4:

ionic start appName blank --type = angular

appName is the name of your project

blank is the template that we choose to create the skeleton of the application

type = angular is the type of project

Then to test your application in the browser you can run the same command that we used before in Ionic 3.

ionic serve

This is the structure of our new Ionic 4 application generated with the CLI:

pics courtesy: medium.com

How to migrate your application from Ionic 3 to Ionic 4?

You are probably wondering how to migrate an existing application from Ionic 3 to one from Ionic 4. The Ionic Framework team has written super detailed documentation with the steps for migration.

The truth is that the migration process is quite simple and personally has not generated any problems.

You can also use the migration linter which is a tool that automatically checks your code and tells you what changes you should make.

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