Skip to main content
In Angular applications, wrap PindoSMS in an @Injectable service. This lets you inject the SMS client anywhere in your app via Angular’s dependency injection system.

​
Installation

npm install pindo-sms

​
Store the token in environment files

Angular’s build system supports src/environments/environment.ts for per-environment configuration. Store your Pindo token there rather than hard-coding it: 
export const environment = {
  production: false,
  pindoApiToken: 'your_api_token_here',
};
Angular environment files are bundled into the client-side JavaScript and are visible in the browser. Use them only for tokens that are safe to expose publicly, or restrict SMS sending to a server-side proxy (such as an Angular Universal API route or a separate backend).

​
Create the SMS service

Create a service that wraps PindoSMS and expose methods for the operations your app needs:
src/app/pindo-sms.service.ts
import { Injectable } from '@angular/core';
import { PindoSMS, SMSPayload } from 'pindo-sms';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class PindoSMSService {
  private pindoSMS: PindoSMS;

  constructor() {
    this.pindoSMS = new PindoSMS(environment.pindoApiToken);
  }

  sendSMS(to: string, text: string, sender: string): Promise<any> {
    const payload: SMSPayload = { to, text, sender };
    return this.pindoSMS.sendSMS(payload);
  }
}
providedIn: 'root' registers the service as a singleton at the application level — no need to add it to a module’s providers array.

​
Use the service in a component

Inject PindoSMSService into any component via the constructor:
src/app/contact/contact.component.ts
import { Component } from '@angular/core';
import { PindoSMSService } from '../pindo-sms.service';

@Component({
  selector: 'app-contact',
  template: `
    <button (click)="sendNotification()">Send SMS</button>
    <p *ngIf="status">{{ status }}</p>
  `,
})
export class ContactComponent {
  status = '';

  constructor(private smsService: PindoSMSService) {}

  async sendNotification() {
    this.status = 'Sending...';
    try {
      await this.smsService.sendSMS('+250781234567', 'Hello from Angular!', 'MyApp');
      this.status = 'SMS sent!';
    } catch (error) {
      console.error('Failed to send SMS:', error);
      this.status = 'Failed to send SMS.';
    }
  }
}

​
Angular Universal (server-side rendering)

If your application uses Angular Universal, you can move SMS sending entirely to the server to keep your token out of the browser bundle.
1

Create a server-side API endpoint

Add an Express route in server.ts (the Universal server entry point) that calls PindoSMS directly:
server.ts (excerpt)
import { PindoSMS, SMSPayload } from 'pindo-sms';

const pindo = new PindoSMS(process.env['PINDO_API_TOKEN']!);

server.post('/api/send-sms', async (req, res) => {
  const { to, text, sender } = req.body as SMSPayload;
  try {
    const response = await pindo.sendSMS({ to, text, sender });
    res.json(response);
  } catch (error) {
    res.status(500).json({ message: 'Failed to send SMS' });
  }
});
2

Call the endpoint from your Angular service

Replace the direct PindoSMS call in PindoSMSService with an HttpClient request to your own endpoint:
src/app/pindo-sms.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PindoSMSService {
  constructor(private http: HttpClient) {}

  sendSMS(to: string, text: string, sender: string): Promise<any> {
    return lastValueFrom(
      this.http.post('/api/send-sms', { to, text, sender }),
    );
  }
}
Store the token as an environment variable (PINDO_API_TOKEN) in the Node.js process running Angular Universal rather than in environment.ts. The token never reaches the browser.

Build docs developers (and LLMs) love

Get started for freeTalk to us