Ionic 4 Sendgrid for Contact Us Page

Ionic Framework Ionic Angular
1

I’m trying to use Sendgrid (mailing service) for my contact page in my app. But… I’m not sure how… I think I’m close. Can anyone help me?

This is the code when the user hits the submission button…

async submit(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.supportMessage = '';
      this.submitted = false;

      const toast = await this.toastCtrl.create({
        message: 'Your support request has been sent.',
        duration: 3000
      
        const sgMail = require('@sendgrid/mail');
        sgMail.setApiKey(process.env.SENDGRID_API_KEY);
        msg = {
          to: 'test@example.com',
          from: 'test@example.com',
          subject: 'Sending with Twilio SendGrid is Fun',
          text: 'and easy to do anywhere, even with Node.js',
          html: '<strong>and easy to do anywhere, even with Node.js</strong>',
        };
        this.sgMail.send(msg);

      
      });
      await toast.present();
    }
  }

MailErrors

I also added a picture so you could see the error.

Sorry if I’m wasting your time over something that’s simple.

Hope you can help :slight_smile:

2

No you are not close. You should maybe learn typescript basics a bit, because you are trying to import/require stuff at the wrong place. Also the whole Stuff where you define the msg etc. is at the absolute wrong place as you are in the ToastController?

3

Thank you so much for your reply!!! I didn’t realize i put it inside the ToastController :flushed: I don’t get any red problems when I move it outside. The new error is "cannot find name ‘require’ and “cannot find name ‘process’”. Thanks for your help! If you have any more suggestions, they are also welcome :slight_smile: I’ll look into learning typescript too, thank you!

4

In the end, I couldn’t find out how to get SendGrid working with ionic :frowning:

But, for someone else looking for something similiar (not the same though), I got back4app (back4app.com) working with my contact us page and with my sign-up page! It was simple and quick, i highly recommend using it for someone who is a beginner like me!

Hope this helps someone!