IONIC 4 TOAST - syntax has changed?

Ionic Framework
1

cant handle toast’s dismiss, plus this doc said we could add custom buttons and stuff, none of that works anymore too https://ionicframework.com/docs/api/toast

2

What is your code though?

4

So, the issue is that you are unable to create such a toast, or it disappearing after 5 seconds?

5

The issue is creating the toast yes

how do I handle the dismiss ?

image

it doesnt seem like it wants to be handled

ps: tried ionic’s official docs’ code, ionic’s forum solutions that people have given before and stackoverflow’s solutions, none of the codes seem to have the right syntax, theres always something wrong

6

Ok, this works perfectly fine on my end. See below screenshots for my ionic version I am on as well.

Capture

Capture_2
Capture_2.PNG1029×314 8.87 KB

Sometimes VS Code gives some unnecessary issues. Did you save the file(and see if the error goes away)?

7

Yeah I’m aware of vs code being odd sometimes, tried my usual fixes for that but nothing

image

How do I print it the way you did tho?

Oh so it’s really just me afterall
image
this is causing the problem I guess, im on 4.12 and ure already on 4.6

8

For your ionic version, did you try this solution mentioned in the link https://github.com/ionic-team/ionic/issues/15389#issuecomment-417352644 ? Also, for complete information, I just did ionic info.

1 Like
9

Yep wow that’s how it’s done on this version, I searched around for posts on how to make the toast, and no one used this version’s way of doing it, I guess if I got to search for the compilation error on ondiddismiss i’d find the solution on that post.

thing is, I wasn’t even expecting a version difference since I updated just a day or two ago, but I just now realized that when I’m updating to the last version it’s still not updated, I just tried updating again and it said it was successful but it still hasn’t updated, we’ll I’ll look into fixing that now

image
image.png973×358 10.3 KB

but yeah it ended up being a version’s problem tnx

1 Like
10

Glad to help :slight_smile: yes, sometimes it’s strange behavior between versions. It’s better to do ionic serve each time just in case.

11

Just to add on to this, we have some documentation on updating the framework here: https://ionicframework.com/docs/installation/cdn#angular-ionic-framework

Running the following will update to the latest version of the framework:

npm install @ionic/angular@latest --save

When you run ionic -v you are getting the Ionic CLI version which is used to run commands such as ionic serve. You may be updating this instead of the framework which is why there is a version mismatch. :slightly_smiling_face:

1 Like
12

Thank you @brandyshea , yeah my bad for mistaking different things!
Wow so amazing now that amazing toast example available on the docs works perfectly !

This one from here https://ionicframework.com/docs/api/toast

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    toast.present();
  }

HMMMM, do you happen to know if it is possible to center the header on the toast? I’ve looked at the css variables available and I saw the text-align: center !important; for the message but nothing here to affect the header

13

Whoa when I first applied it didn’t center the header, and that I closed the project, went for a break and came back, now the header is centered too! Welp, I guess I fixed it :man_shrugging: ahaha