This stable release of Ionic comes after several betas and release candidates with improvements suggested by the community.

What’s new?

Angular

React

  • supports React 17+

Vue

  • supports Vue 3.0.6+

Angular routing for standalone components 

Using standalone components with an Angular project allows you to remove the concept of ngModules which has been part of Angular for many years.

In an existing application, this can remove many boilerplates .module files and in a new application, it means you can avoid the concept of ngModules almost entirely.

Ionic has officially supported Standalone Components since version 6.3.0, and now that they have been blessed by the Angular team as “stable” in both Angular 14 and 15 projects you can start using them safely in your Ionic project.

In ionic 7 the routing for the standalone components has changed and the ngModules have been completely removed.

How to implement to understand the new routing process:

Inline overlays

In version 6, we found the ability to use Modal and Popover components declaratively within app templates. Now, this functionality has been added to the Action Sheet, Alert, Loading, Picker, and Toast components.

This addition means that developers can pass data as properties over the component instance without using a controller.

As well as isOpen and trigger properties to reduce the amount of code needed to present and reject these overlays.

Ionic 7

The playgrounds for Action Sheet, Alert, Loading, Picker, and Toast have been updated to showcase this new usage. Check all the components here.

Consistent Events Emissions

Developers can continue to use the ionInput event in components such as Input or Textarea to detect every keypress from the user, and don’t need to make changes to get this improvement.

Simplified Form Control Syntax

Introduces a streamlined way of working with form controls such as Toggle or Input. The Item and Label components are no longer required, and each form control handles the label content directly. Additionally, certain features such as helper text or input fill modes have moved from ion-item to the appropriate form controls such as ion-input, ion-textarea, and ion-select.

Ionic 7
Before
Ionic 7
After

These changes have been added in a backward-compatible way meaning developers don’t need to migrate to this new syntax to upgrade to 7 and, can do it all at once.

Performance Improvements

It significantly improves the performance of Tabs. In React and Vue, developers can expect a performance improvement of up to 70% when switching tabs.

Ionic Angular developers can expect improved component initialization times thanks to optimizations in Stencil!

Improved Vite Compatibility

This version removes the Common JS entry points for Ionic React and Ionic Vue to make each package easier to use with Vite and Vitest.

ion-slides Removal

The ion-slides and ion-slide components have been removed in favor of using Swiper.js directly. This change gives developers access to the latest version of Swiper, including all the great features this library has to offer.

Alternatively, you should use:

Swiperjs

https://ionicframework.com/docs/angular/slides

How to implement the new version of swiper js version 9

ion-virtual-scroll Removal

The ion-virtual-scroll component has been removed in favor of using solutions provided by each JavaScript Framework. This change enables all developers to use virtual scrolling in their applications.

Alternatively, you should use:

CDK Scroller

https://ionicframework.com/docs/angular/virtual-scroll

Updated Documentation for Ionic 7

The Ionic Docs have been updated with the latest usage examples: https://ionicframework.com/docs.

Starter Applications Tooling

With the release of the new Ionic CLI v7, all new Ionic React and Ionic Vue starter applications will use Vite. This tooling replaces the Vue CLI and Create React App tools used in previous starter applications.

This change only impacts new apps created with Ionic CLI v7. Developers can continue to use the Vue CLI and Create React App tools in their existing Ionic apps.

Getting Started

Developers can follow the Ionic 7 Migration Guide to update their existing Ionic 6 apps.

This article is based on the original article – Ionic 7 is here!

Concluding, use Chat Gpt to generate code: https://ai-generator-red.vercel.app/

Find out more about our blog’s digital category.