You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
Contents
Recent Posts
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- The Real State of JavaScript 2018
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Trigger HTTP Cloud Functions From an Angular Component
written by Jeff Delaney
This lesson has been updated for Angular 5, Firestore, and the new SendGrid v3 NodeJS packages. Get the latest and greatest Transactional Email Lesson.
An Angular4 component used to trigger HTTP cloud functions in Firebase. Check out the Angular transactional email lesson for more details.
Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button (click)="sendEmail()">Send Email via Cloud Function</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// SEE https://gist.github.com/codediodeio/f50c2d2f3cc0243814a40f71f221d2ab | |
| /// To setup transactional email with sendgrid and firebase google cloud functions | |
| import { Component } from '@angular/core'; | |
| import { Http, Headers, Response, URLSearchParams } from '@angular/http'; | |
| import 'rxjs/add/operator/toPromise'; | |
| @Component({ | |
| selector: 'send-email', | |
| templateUrl: './send-email.component.html', | |
| styleUrls: ['./send-email.component.scss'] | |
| }) | |
| export class SendEmailComponent implements OnInit { | |
| constructor(private http: Http) { } | |
| sendEmail() { | |
| let url = `https://your-cloud-function-url/function` | |
| let params: URLSearchParams = new URLSearchParams(); | |
| let headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }); | |
| params.set('to', 'user@example.com'); | |
| params.set('from', 'you@yoursupercoolapp.com'); | |
| params.set('subject', 'test-email'); | |
| params.set('content', 'Hello World'); | |
| return this.http.post(url, params, headers) | |
| .toPromise() | |
| .then( res => { | |
| console.log(res) | |
| }) | |
| .catch(err => { | |
| console.log(err) | |
| }) | |
| } | |
| } |