ionic 7 capacitor show toast thru ts

We can control the showing of toast in ionic 7 with or without capacitor using the below code:

Using the below code you don't have to install any plugin. This code will work in ionic PWA as well as native capacitor.

HTML code:

<ion-header>  
  <ion-toolbar>
        <ion-title>Inline Toast</ion-title>
  </ion-toolbar>
</ion-header>
 <ion-content class="ion-padding">
      <ion-button expand="block"
      (click)="setOpen(true)">
       Open
     </ion-button>
     <ion-toast [isOpen]="isToastOpen"
          message="This toast will close in 5 seconds"
        [duration]="5000"
          (didDismiss)="setOpen(false)">
      </ion-toast>
</ion-content>

ts code:

  import { Component } from '@angular/core';
  @Component({
  selector: 'app-example',
   templateUrl: 'example.component.html',
})

export class ExampleComponent {
  isToastOpen = false;
  setOpen(isOpen: boolean) {
      this.isToastOpen = isOpen;
  }
}