Send Emails from NativeScript with Angular application Via The Rackspace Mailgun API

Step - 1 :
There are many of email services available, but for this example we’re going use the mailgun service by Rackspace in a NativeScript application.

Create a account in Mailgun. If created, you have to keep two important things as mentioned below,

Have a look at api keys section in dashboard

Private api key (Like - **********6c3e6)
Domain name under domain section

Once you get the private api key then need to encode it into Base64 string. You may encode internally in app otherwise use the base64encode.

Before encode api key, You have to add word api, So " api:actual api key "

api:key-0375e*******************************e6

Step - 2 :

Create the new Nativescript with Angular app.

Once created add the http module in @ngModule imports section in app.module.ts inorder to access http calls methods,

app.module.ts
import { NativeScriptHttpModule } from "nativescript-angular/http"; 

... @NgModule({ imports: [ NativeScriptHttpModule ]

Step - 3 :

Then set the mailgun api key and domain with app variables and make the http call as mentioned below,

app.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
import { Http, Headers, Response, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Rx";
import "rxjs/add/operator/map";
import "rxjs/add/operator/do";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})


export class HomeComponent implements OnInit {

//mailgun domain url
private url: string = "sandbo****************************767a.mailgun.org";

//mailgun Base64 encoded api key
private api: string = "YXBp****************************************zNlNg==";

private recipient: string = "testemail@gmail.com";
private subject: string = "Background email test";
private message: string = "Ho hoooooooo.. Background email service is ready to implement..";

constructor( private http: Http) {
}

ngOnInit(): void {
}

public send() {

let headers = new Headers({
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Basic " + this.api
});

let options = new RequestOptions({ headers: headers });

let body = "from=kumaran@example.com&to=" + this.recipient + "&subject=" + this.subject + "&text=" + this.message;


this.http.post("https://api.mailgun.net/v3/" + this.url + "/messages", body, options)
.map(result => result.json())
.do(result => console.log("RESULT: ", JSON.stringify(result)))
.subscribe(result => {
console.log("SENT!");
}, error => {
console.log(error);
});
}

}

app.component.html

<ActionBar title="Home" class="action-bar">
</ActionBar>
<ScrollView class="page">
<StackLayout class="home-panel">
<Button text="Send Mail" (tap)="send()"></Button>
</StackLayout>
</ScrollView>

So now you are ready to send email. Just give a try to send the mail and see what happens!

Conclusion

This may very useful when, In some situations we may require to send emails from background or through UI means let customers to fill details and send mail.