Trigger HTTP Cloud Function via Angular Component (for transactional email)

send-email.component.html

<button (click)="sendEmail()">Send Email via Cloud Function</button>

send-email.component.ts

/// 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)
                    })

  }

}

the header is showing error in that case but if we use like

return this.http.post(url, params, headers)
to
return this.http.post(url, params, {headers})

then its not showing error but also not working as well