How display successfully message in HTML file

Ionic Framework
1

Hi guys,
I use native http for post request
How display successfully message in HTML file And pop the window

2

Greetings,

You could use Toast or Alert component to display message.

3

I am new with ionic, so please can you give an example?

4

Post you code sample here so I could create one or you could just follow ionic documentation, it’s pretty easy.

1 Like
5

View this examples Toast or Alert . It may help you.

1 Like
6

hi this is my code:
sendPostRequest() {

this.resetError()

if (this.isDataValid()) {

this.http.sendRequest(‘myapi/createcomment’,

  {

    method: 'post',

    data: { id: this.id, Name: this.Name, EmailFrom: this.EmailFrom, text: this.text },

    headers: { Authorization: 'OAuth2: token' },

    timeout: 5000

    

  }

  

)

  .then(response => {

    

    // prints 200

    console.log(response.status);

       

  })

  .catch(response => {

    // prints 403

    console.log(response.status);



    // prints Permission denied

    console.log(response.error);

  });

 

}

}

7

This combination concerns me. Why aren’t you using Angular’s HttpClient?

1 Like
8 
import { ToastController } from '@ionic/angular'; // Added Line
constructor(public toastController: ToastController) {} // Add in constructor

sendPostRequest() {
this.resetError()
if (this.isDataValid()) {
this.http.sendRequest(‘myapi/createcomment’,
  {
    method: 'post',
    data: { id: this.id, Name: this.Name, EmailFrom: this.EmailFrom, text: this.text },
    headers: { Authorization: 'OAuth2: token' },
    timeout: 5000
  })

  .then(response => {
    // prints 200
    this.presentToast('Success Message') // call toast
    console.log(response.status);
  })
  .catch(response => {
    // prints 403
    this.presentToast('Error Message') //Call toast
    console.log(response.status);
    // prints Permission denied
    console.log(response.error);

  });

  async presentToast(msg) {
    const toast = await this.toastController.create({
      message: msg, //Custom Message
      duration: 2000 //Duration 
    });
    toast.present();
  }

}

Hope this will help.

1 Like