NgxBrevo

An Angular library for seamless integration with the Brevo (formerly Sendinblue) email platform. It provides components, services, and utilities for managing email templates, handling authentication, and interacting with Brevo APIs within your Angular applications.

Features

• Easy Integration: Quickly connect your Angular app with Brevo.
• Template Management: Ready-to-use components for listing and managing email templates.
• Authentication: Built-in authentication providers for securing your requests.
• State Management: Uses robust state management for a smooth user experience.
• Highly Customizable: Designed to be flexible and adaptable to your specific needs.

Installation

To install ngx-brevo in your Angular project, run:

npm install ngx-brevo

Setup & Configuration

1. Import the Module

Import the NgxBrevoModule in your root AppModule (or standalone component) and provide your Brevo configuration.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxBrevoModule } from 'ngx-brevo';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Initialize with your configuration
    NgxBrevoModule.forRoot({
      apiKey: 'YOUR_BREVO_API_KEY' // Ensure to keep this secure!
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: For security reasons, it's highly recommended to proxy your API requests through a secure backend server rather than exposing your API key directly in the client application. The above example is for demonstration.

Example Usage

Displaying the Template List

You can use the built-in ngx-brevo-template-list component to easily display your Brevo email templates.

<!-- your.component.html -->
<ngx-brevo-template-list></ngx-brevo-template-list>

Using the Brevo Service

You can inject the service to fetch templates or perform other operations programmatically.

import { Component, OnInit } from '@angular/core';
import { BrevoService } from 'ngx-brevo';

@Component({
  selector: 'app-my-email-manager',
  template: `
    <div *ngIf="templates">
      <h2>My Templates</h2>
      <ul>
        <li *ngFor="let template of templates">{{ template.name }}</li>
      </ul>
    </div>
  `
})
export class MyEmailManagerComponent implements OnInit {
  templates: any[] = [];

  constructor(private brevoService: BrevoService) {}

  ngOnInit(): void {
    this.brevoService.getTemplates().subscribe(
      data => {
        this.templates = data;
      },
      error => {
        console.error('Error fetching templates', error);
      }
    );
  }
}

License

MIT