ngx-pss-sendgrid-v1
v0.0.1
Published
The PSS Sendgrid library is an internal library made to be integrated into angular applications. It offers client applications the ability to send data to the emailAPI of PSSG
Downloads
4
Readme
PSS Sendgrid Library
The PSS Sendgrid library is an internal library made to be integrated into angular applications. It offers client applications the ability to send data to the emailAPI of PSSG
Prerequisites
Installation and Setup
npm install ngx-pss-sendgridSetup
include the following in your module.ts file
...
import { NgxPssSendgridModule } from 'ngx-pss-sendgrid';
@NgModule({
declarations: [
...
],
imports: [
...
NgxPssSendgridModule.forRoot(environment.SendgridUrl)
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }In your enviroment variables, configure these following lines
export const environment = {
production: false,
...
SendgridUrl: {
sendgridAPI: "SERVERLESS_API",
sendgridEmail: "WEBSITE_EMAIL",
emailSubject: "EMAIL_SUBJECT",
siteName: "WEBSITE_NAME"
},
...
};There are two ways to use the library. The Basic Usage provides you with a basic form and the Advanced Usage allows you to configure your own form and use the library's service to send data.
The Basic Usage
include the following line where you want to use the form inside your app.component.html file OR any .html file
<lib-ngx-pss-sendgrid formTitle="YOUR_FORM_TITLE"></lib-ngx-pss-sendgrid>You will need to add bootstrap cdn css and javascript for the default view of the form inside your index.html, add the following lines:
<!doctype html>
<html lang="en">
<head>
...
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
...
</head>
<body>
<app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>The Advanced Usage
You have to follow a certain standard to get the desired results from this library. The following diagram shows the required properties when using this library inside your app.component.ts file OR any .ts file
...
import { NgxPssSendgridService } from 'ngx-pss-sendgrid';
...
export class ExampleComponent implements OnInit {
...
constructor(private service: NgxPssSendgridService) {}
...
onBtnSubmit(formValues) {
this.service.sendEmail(formValues).subscribe({
...
})
}
}The formValues json object must include "userEmail" and "content" for the library to work. When using this method, you can send additional json key-value pairs inside the formValues to save additional metadata fields
An example Json Object
{
userEmail: "THE EMAIL OF END USER", //REQUIRED
content: "THE CONTENT SENT BY END USER", //REQUIRED
... //Additional optional fields here
}It is the responsibility of the client application to create the HTML format of the sent data