Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (92 sloc) 3.13 KB
title lastmod publishdate author draft description type tags vimeo github
SendGrid Angular
2019-07-05 10:43:06 -0700
2019-07-05 10:43:06 -0700
Jeff Delaney
false
Send transactional email with SendGrid from Angular
lessons
angular
sendgrid
346868823

{{% box emoji="👀" %}} This tutorial is an extension of the SendGrid Transactional Email Guide. You must have the Cloud Functions deployed to start sending email from your frontend app. {{% /box %}}

Initial Setup

Make sure you have AngularFire installed in your project. Then include functions and auth in the main app module.

{{< file "ngts" "app.module.ts" >}} {{< highlight typescript >}} import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { AngularFireFunctionsModule } from '@angular/fire/functions';

import { environment } from '../environments/environment';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AngularFireModule.initializeApp(environment.firebase), AngularFireAuthModule, AngularFireFunctionsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

{{< /highlight >}}

Transactional Email Component

{{< file "ngts" "app.component.ts" >}} {{< highlight typescript >}} import { Component } from '@angular/core'; import { AngularFireFunctions } from '@angular/fire/functions'; import { AngularFireAuth } from '@angular/fire/auth'; import * as firebase from 'firebase/app';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(public afAuth: AngularFireAuth, private fun: AngularFireFunctions) {}

loginWithGoogle() { this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); }

sendEmail() { const callable = this.fun.httpsCallable('genericEmail'); callable({ text: 'Sending email with Angular and SendGrid is fun!', subject: 'Email from Angular'}).subscribe(); } } {{< /highlight >}}

The HTML provides simple conditional logic to display separate templates for logged-in and logged-out users.

{{< file "html" "app.component.html" >}} {{< highlight html >}}

SendGrid Transactional Email with Angular

{{ user | json }}

<hr>

<button (click)="sendEmail()">Send Email with Callable Function</button>
<button (click)="afAuth.auth.signOut()">SignOut</button>

<ng-template #login> <button (click)="loginWithGoogle()">SignIn with Google {{< /highlight >}}

You can’t perform that action at this time.