helios-send-angular

Angular service for HeliosSend email delivery service, built by Revinity.

Installation

npm install helios-send-angular
# or
pnpm add helios-send-angular
# or
yarn add helios-send-angular

Setup

First, ensure HttpClientModule is imported in your app.module.ts:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports: [HttpClientModule],
  // ...
})
export class AppModule {}

Usage

Inject the service in your component:

import { Component } from '@angular/core';
import { HeliosEmailService } from 'helios-send-angular';

@Component({
  selector: 'app-contact',
  template: `
    <button (click)="sendEmail()" [disabled]="loading">
      {{ loading ? 'Sending...' : 'Send Email' }}
    </button>
  `,
})
export class ContactComponent {
  loading = false;

  constructor(private emailService: HeliosEmailService) {}

  sendEmail() {
    this.loading = true;
    this.emailService
      .send({
        from: { email: '[email protected]', name: 'My App' },
        to: [{ email: '[email protected]' }],
        subject: 'Contact Form',
        html: '<p>New contact form submission</p>',
      })
      .subscribe({
        next: (result) => {
          console.log('Email sent:', result);
          this.loading = false;
        },
        error: (err) => {
          console.error('Failed to send email:', err);
          this.loading = false;
        },
      });
  }
}

Backend Endpoint

This service requires a backend endpoint (e.g., /api/sendEmail). You can create one using:

• Next.js: helios-send-next
• Express/Node: helios-send-node
• Any backend framework

Template Design with HeliosEditor

Design templates with HeliosEditor and send them:

this.emailService.send({
  from: { email: '[email protected]' },
  to: [{ email: '[email protected]' }],
  templateId: 'welcome-template-123',
  substitutions: {
    userName: 'John Doe',
  },
}).subscribe(/* ... */);