Toast.present is not a function

Ionic Framework ionic-v3
1

I have Problem in toast.present();

My code Html

type or paste code here
```<ion-content padding>
  <form (ngSubmit)="FormReg()" padding>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" [(ngModel)]="todo.email" name="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input [(ngModel)]="todo.pw" name="pw"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Confirm password</ion-label>
      <ion-input [(ngModel)]="todo.confirm_pw" name="confirm_pw"></ion-input>
    </ion-item>
    <ion-button ion-button type="submit" color="primary" expand="full">Sign In</ion-button>
  </form>
</ion-content>

My code ts

```import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http'

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

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

  constructor(
    private http:HttpClient,
    public toastController: ToastController,
    ) 
    { }


  ngOnInit() {
  }

  
  FormReg(){
  
    let toast = this.toastController.create({
      message: 'Toast Message',
      duration: 3000
    });
    toast.present();

  }

}
2

Hello,
I am at the moment on ionic 4, but assume it is on ionic 3 similar.
On Ionic 4 .create(… returns a promise, but you nether await it or use .then (promise like syntax) The code line toast.present(), which is a promise too, will, due to asyncrounous code executing, be executed before the toast is ‘created’ and the variable toast has no member present() at this time.

Change it to

async FormReg(){
  
    let toast = await this.toastController.create({
      message: 'Toast Message',
      duration: 3000
    });
    return await toast.present();

  }

Best regards, anna-liebt

1 Like
3

Thanks anna , the problem has been resolved :wink: