Native Toast always closing the keyboard


I would like to know if there is a way to avoid that the Native Toast Plugin close the keyboard all the time.

Is that possible?


Any help, please? It must have a way to avoid the component to close the keyboard…

Any news about this problem?

Finally I am using my own html toast…:frowning:

How? Could you share some code/info? thx

Of course!

Here you go:

app.html - add this at the end:

<div #toasty class="my-alert" [ngClass]="{'success': notification.success, 'error': !notification.success}"
(click)="hideToast();" text-wrap tappable>
  <h6 ion-text color="white">{{ notification.title }}</h6>
  <p ion-text color="white" style="margin-top: -6px;">{{ notification.message }}</p>


	position: absolute;
	width: 90%;
    height: auto;
	transform: translateY(-100%);
	transition: 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045);
	z-index: 99;
	top: 20px;
    left: 20px;
    text-align: center;
    opacity: 0;
    border-radius: 10px;

    background-color: green;

    background-color: red;

    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0%);
    opacity: 1;

.my-alert > p{
    color: white;
    font-size: 1.4rem;


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


@ViewChild('toasty') toasty: ElementRef;


showToast() {
	setTimeout(() => {
	  this.renderer.setElementClass(this.toasty.nativeElement, 'enter', true);
	}, 1000);

hideToast() {
	setTimeout(() => {
	  this.renderer.setElementClass(this.toasty.nativeElement, 'enter', false);
	}, 5000);

Call it:


Remember to create your own notification model:

notification: any = { title: 'My App', message: ' ', success: true };

Let me know if it helps!


Thank you sir! Will try!