Hello guys, Today, I am going to show you how to create a custom toast in ionic.
First, create an ionic blank project with the command which is given below.
|
1 |
ionic start CustomToast blank |
Now create a button that will show the toast in the “home.html” file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button color="secondary" large round block outline (click)="customToast()">Custom Toast</button> </ion-content> |
Now, import “ToastController” in your “home.ts” file.
|
1 |
import { ToastController } from 'ionic-angular'; |
And inject it in your constructor:
|
1 |
constructor(public toastCtrl: ToastController) { |
Now create a method named “customToast()” in “home.ts” for displaying the custom toast:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import {NavController, ToastController} from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController,public toastCtrl: ToastController) { console.log(this.toastCtrl); } customToast(){ this.toastCtrl.create({ message: 'Toast Successfully Loading...', duration: 5000, position : 'middle', cssClass: 'customToastClass' }).present(); } } |
Now create a CSS class “customToastClass” in “app.scss” file.
|
1 2 3 4 5 6 7 8 9 10 |
.customToastClass{ > div{ background-color:#32db64!important; font-weight: bold; position: absolute; top: 446px !important; text-align: center !important; border-radius: 30px !important; width: 50% !important; } |
Below is what you see when you click the button. You have your custom toast within a few min(s) read. Go ahead and show your creativity by modifying the template.
I hope this helps, please share the blog with the needy.
If any extra information is required please comment down below.
Happy Coding 🙂
Recent Comments