How to use ion-toast Ionic 7

 

Create a new app ionic

1. Install Node.js and NPM: Before you start creating your Ionic app, you need to install Node.js and NPM (Node Package Manager) on your computer. You can download and install them from the official website: .

2. Install Ionic CLI: Once you have Node.js and NPM installed, you can install the Ionic CLI by running the following command in your terminal or command prompt:

npm install -g @ionic/cli

This command will install the latest version of the Ionic CLI globally on your system.
1. Create a new Ionic app: To create a new Ionic app, run the following command in your terminal or command prompt:

ionic start myApp

To create a new app with a specific template, you can use the --type option followed by the template name. For example, to create a new app with the blank template, run the following command:

ionic start myApp --type=blank

1. Run the app: Once you have created your app, you can run it in the browser by running the following command:

cd myApp
ionic serve

This will start a local development server and open your app in the default web browser. You can make changes to your app and see the changes live in the browser.
That's it! You have now created a new Ionic app and are ready to start building your own mobile app.

ion-toast

A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.

To use ion-toast in Ionic 7, you can follow these steps:

1. Import the ToastController from @ionic/angular in your component where you want to use the toast.

Inject the ToastController in your component's constructor.

Create a toast by calling the create() method of the ToastController.

In the above code, we are creating a toast with the message "This is a toast message." and a duration of 2000 milliseconds (2 seconds). The present() method is called to display the toast.

toastButtons is not a native Ionic component. However, if you're referring to the toastController that comes with Ionic, you can add buttons to a toast message by using the buttons property.

Create a toast with buttons by calling the create method on the ToastController:

home.page.ts

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  handlerMessage = '';
  roleMessage = '';

  constructor(private toastController: ToastController) { }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'middle',
      duration: 4000,
      animated: true,
      icon: 'apps-outline',
      translucent: true,
      color: "danger",
      buttons: [
        {
          side: 'start',
          text: 'Action',
          handler: () => {
            this.handlerMessage = 'More Info clicked';
          }
        }, {
          text: 'Close',
          role: 'cancel',
          handler: () => {
            this.handlerMessage = 'Dismiss clicked';
          }
        },
      ],
    });
    toast.present();
  }

  public toastButtons = [
    {
      text: 'More Info',
      role: 'info',
      handler: () => {
        this.handlerMessage = 'More Info clicked';
      },
    },
    {
      text: 'Dismiss',
      role: 'cancel',
      handler: () => {
        this.handlerMessage = 'Dismiss clicked';
      },
    },
  ];

  setRoleMessage(ev: any) {
    const { role } = ev.detail;
    this.roleMessage = `Dismissed with role: ${role}`;
  }
}

In this example, the buttons property is an array of button objects, each of which has a text property (the button text) and an optional handler property (a function to execute when the button is clicked).

The role property is used to specify the role of the button. In this case, the "Close" button has a role of "cancel", which means that it will dismiss the toast when clicked.

The side property is used to specify the position of the button. In this case, the "Action" button will be positioned on the left side of the toast.

Call the present method on the toast object to display the toast:

1. Call the presentToastWithOptions() method wherever you want to show the toast.

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="danger">
    <ion-title>
      Ionic Toast
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)="presentToastWithOptions()">Open Toast with create </ion-button>
  <ion-button id="open-toast" color="danger">Open Toast in html</ion-button>
  <ion-toast
    trigger="open-toast"
    message="Hello World!"
    [duration]="7000"
    [buttons]="toastButtons"
    [position]="'middle'"
    (didDismiss)="setRoleMessage($event)"></ion-toast>
  <p>{{ handlerMessage }}</p>
  <p>{{ roleMessage }}</p>
</ion-content>

In the above code, we are calling the presentToast() method when the button is clicked.

You can customize the ion-toast component by setting various options like color, position, header, buttons, etc. You can find more information about these options in the official Ionic documentation.

That's it! You now have a toast message with buttons in your Ionic app.