Native Toast always closing the keyboard

Ionic Framework ionic-v3
1

Hi,

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?

Thanks.

2

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

3

Any news about this problem?

4

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

5

How? Could you share some code/info? thx

6

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>
</div>

app.scss:

.my-alert{
	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;
}

.my-alert.success{
    background-color: green;
}

.my-alert.error{
    background-color: red;
}

.my-alert.enter{
    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;
}

app.component.ts

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

...

@ViewChild('toasty') toasty: ElementRef;

...

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

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

Call it:

this.showToast();

Remember to create your own notification model:

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

Let me know if it helps!
:smiley:

2 Likes
7

Thank you sir! Will try!