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.