October 5, 2022
  • Announcements
  • Ionic 6
  • Ionic Frame
  • release

Announcing Ionic v6.3

Sean Perkins

Today, I am excited to share the news of Ionic 6.3’s release. This release improves multiple date selection with additional header text and support for the ion-datetime-button, adds experimental support for Angular standalone component routing and contains a few community contributions!

The complete list of changes can be found in the Changelog.

Angular Standalone Component Routing

We added experimental support for standalone components with routing.

@NgModule({
  imports: [
    RoutingModule.forRoot([
      {
        path: '',
        loadComponent: () =>
          import('./example.component').then((m) => m.ExampleComponent),
      },
    ]),
  ],
})
export class AppRoutingModule {}

Developers will need to assign the environmentInjector property to their ion-router-outlet or ion-tabs component to support standalone routing within that outlet.

import { EnvironmentInjector } from '@angular/core';

constructor(public environmentInjector: EnvironmentInjector) { }

<ion-router-outlet
  [environmentInjector]="environmentInjector">
</ion-router-outlet>

Demo: https://stackblitz.com/edit/ionic-angular-standalone-components

Header Text For Multiple Date Selection

We’ve enhanced the header text of ion-datetime to inform users of their selected date or dates, when using showDefaultTitle and multiple.





You can customize this further with the titleSelectedDatesFormatter property.

<ion-datetime
  locale="en-US"
  presentation="date"
  multiple="true"
  show-default-title="true"
></ion-datetime>

<script>
  const datetime = document.querySelector('ion-datetime');
  datetime.titleSelectedDatesFormatter = (selectedDates) => {
    return 'Selected: ' + selectedDates.length;
  };
  datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
</script>

Multiple Date Selection with DatetimeButton

You can now select multiple dates using the ion-datetime-button component.

<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-datetime
  locale="en-US"
  id="datetime"
  presentation="date"
  multiple="true"
></ion-datetime>




Range Knob Focus, Active or Hovered Indication

We have improved the accessibility of the ion-range component when it is hovered, focused or active. Users will see an indicator and the pin, if enabled, when interacting with the range knob.





Alert Accepts Promise For Button Handlers

Developers can perform asynchronous operations before the ion-alert is dismissed, with added support for promises on the individual button handlers.

Thank you, @einfach_hans for this community contribution!

const alert = this.alertController.create({
  header: 'Example Alert',
  buttons: [
    {
      text: 'Example',
      handler: async () => {
        const loading = this.loadingController.create({
          message: 'Loading...',
        });
        await loading.present();
        await this.doSomething();
        await loading.dismiss();
        return true;
      },
    },
  ],
});
await alert.present();

Button Can Submit From Outside The Form

Using the new form property on ion-button, developers can configure a form to be submitted without the button being located inside the form.

Thank you, postnerd for this community contribution!

<form id="exampleForm">
  <!-- Form controls -->
</form>
<ion-button form="exampleForm">Submit</ion-button>

<form>
  <!-- Form controls -->
</form>

<ion-button>Submit</ion-button>
<script>
  const form = document.querySelector('form');
  const button = document.querySelector('button');

  button.form = form;
</script>

What’s Next?

If you have other ideas for how we can improve Ionic, let us know on our GitHub repo. Thank you to everyone who provided feedback and contributions to the features in this release. Ionic 6.3 would not have been possible without all of you!

Sean Perkins

Related Posts