Ionic is one of the best frameworks in the market, It’s open source SDK for developing the Hybrid Mobile Application. There are basically three components such as:

1. A Sass-based UI structure that is specially optimized for mobile UIs.
2. An Angular platform that is helpful in quick scalable app creation.
3. A compiler (Cordova or PhoneGap) or wrapper that is utilized for developing native apps using CSS, JavaScript, and HTML.

New Components Introduced In Ionic 4

Components for the Web:

Web Component are a set of web platform APIs allowing you to create custom, reusable, encapsulated HTML tags to use in web pages.

It is the most significant change as they moved to a web component for each component. Web components are nothing but a set of web platform APIs that can let the developer create reusable, new, or custom encapsulated HTML tags that can use in web application and pages.

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 markup within a web component.
• HTML imports: 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.

Capacitor:

Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins required by the app.It also consists of PWA support to enable the developer to write one app and then launch it to the app store.

Stencil:

This new creation of the Ionic team is a web component compiler that is useful for building standards-compliant with web servers. This also uses additional APIs such as TypeScript, JSX, async, and Virtual DOM, which works best for progressive web apps (PWA).

Ion-backdrop:

They are full-screen components which overlay other components.These are placed on top of the other contents, as this way it is able to dismiss another component.

ion-picker:

A Picker displays a row of buttons and columns on top of the app’s content, and at the bottom of the viewport.
> Picker-column
> Picker controller

ion-Ripple Effect:

The ripple effect component adds the Material Design ink ripple interaction effect. It is designed to be efficient, noninvasive, and usable without adding any extra DOM to your elements. It works without javascript degrades to easier CSS-Only implementation.

ion-Route:

It will pick up a component and will render it browser URL gets matched with URL property.

ion-Searchbar:

This includes a text field which is useful for searching from a huge collection. Here, the team of Ionic has added nine bar styles, and out of them all, v4 appears to be the best.

ion-skeleton-text:

Skeleton Text is for rendering placeholder content. It will render a gray block at the specified width.

ion-select Popover:

This mainly is a dialogue appearing on top of the current page, and it is used for the overflow actions that do not fit well in the navigation bar.

Ionicons 4.0:

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font now available and distributed as web components with drastically reduced sizes, and brand new icon forms reflecting the latest iOS and Material Design styles.

Tappable Items:

To list items, we were used <button> in v3 but in v4 has the tappable attribute for an <ion-item>.

<ion-item tappable (click)="writeSomething()">

Your Button Item

</ion-item>

CSS Variables:

This is the exclusive feature of Ionic that is going to modernise the whole look of your application making some slight changes in a few variables without even using the build tools.

Color Changes:

The Ionic team has changed the earlier default color and it now has a new default color.

ion-reorder:

Reorder allows items to be dragged to change its order horizontally. It can be used within an ion-reorder-group to provide a visual drag and drop interface.

Lazy Loading:

It is basically a design pattern in the ionic framework which is used to distinguish initialization of the components until it is required. This will help to improve the performance of the app and decrease the load time of the app by dividing it into various bundles and loading the app when asked for.

Ion-show-when:

It shows child content when a query evaluates to true. It can watch for platform changes, mode changes, CSS media queries, and device orientation.

Ionic Native 5:

Ionic Native 5 brings the app development project to the fully framework agnostic status. where our components work with either framework or without a framework. Ionic native 5 requires Angular 5 for those choosing to use injectables/providers.

Changelogs in Native 5:

Changelogs is basically shipped with three bundles, i.e.
>  Angular (5.x+) providers
>  ES6 modules
>  AngularJS support
The bundle releases and ES6 will feature static classes for plugins. Ionic developers who use Angular choose between using the injectables, or can import & use ES6 plugins statically.