Ionic 6.1: Dynamically changing the breakpoint of a Sheet Modal

Ionic Framework 6.1 introduces the ability to dynamically change the current breakpoint of a sheet modal. This features enables developers to animate sheet modals to predefined breakpoints based on your application needs.

To get started with this feature, you will need to use a sheet modal in Ionic. The below example is of Angular, but this feature applies to the vanilla web component implementation and all supported frameworks.

<ion-button id="sheet-modal">Click to open modal</ion-button>
<ion-modal #modal 
  trigger="sheet-modal"
  [initialBreakpoint]="0.25" 
  [breakpoints]="[0.25, 0.5, 1]">
  <ng-template>
    <ion-content>
      <ion-list>
        <ion-item button (click)="moveTo(0.25)">
          <ion-label>Move to 0.25</ion-label>
        </ion-item>
        <ion-item button (click)="moveTo(0.5)">
          <ion-label>Move to 0.5</ion-label>
        </ion-item>
        <ion-item button (click)="moveTo(1)">
          <ion-label>Move to 1</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>

The above sheet modal will initially display when the button is clicked, to the 0.25 breakpoint. It has available breakpoints for 0.25, 0.5, and 1 (fully expanded).

To change the breakpoint dynamically, we need to query the ion-modal element to access the public API function: setCurrentBreakpoint.

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-sheet-modal-example',
  templateUrl: 'sheet-modal-example.component.html'
})
export class SheetModalExample {

  @ViewChild('#modal') modal: ElementRef;

  moveTo(breakpoint: number) {
    const { nativeElement } = this.modal;
    if (!nativeElement) {
      return;
    }
    nativeElement.setCurrentBreakpoint(breakpoint);
  }

}

That is it, your sheet modal should now dynamically change the breakpoint value after interacting with the individual items to move to a specific breakpoint.

You can use this concept to make features such as an iOS maps clone:

Source code: https://github.com/sean-perkins/ionic-6.1.0-maps-example

We hope that you find value in this feature and others in the 6.1.0 release.