Ngx-pss-sendgrid-v1 NPM

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-sendgrid

Setup

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/bootstrap@5.2.0/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/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/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

@angular/animations @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router bootstrap rxjs tslib zone.js

@everything-registry/sub-chunk-2286 @infinitebrahmanuniverse/nolb-ngx-p

0.0.1

2 years ago