We are pleased to announce the graduation of our Angular OneSignal SDK package from beta to general availability, so it's even easier to leverage push notifications to your Angular app. This package supports Angular developers using OneSignal by reducing friction when embedding our web push SDK into Angular web applications.

Benefits of Using the Angular NPM Package

The OneSignal Angular package streamlines the process of integrating OneSignal. The SDK now includes all the most up-to-date OneSignal functions available in the native web push SDK. Because the SDK is available as an NPM package, you can more easily manage OneSignal along with your existing dependencies. Additionally, the SDK comes with full Typescript support you can leverage right out of the box.

Getting Started

To help you get started using our Angular SDK, we've outlined some basic steps below. For more information, see the full OneSignal Angular Github README guide.

Using the Package

First, add the Angular OneSignal package to your package.json file using the package manager tool of your choice:

Yarn

yarn add onesignal-ngx

npm

npm install --save onesignal-ngx

Import the Package into Your App

import { OneSignal } from 'onesignal-ngx';

Initialize OneSignal with your appId via the options parameter:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-example-app';

  constructor(private oneSignal: OneSignal) {
    this.oneSignal.init({
      appId: "8e7fe838-fbcd-4152-980d-32565a2dcf03",
    });
  }
}

Service Worker Files

Make sure you have uploaded the necessary files you need to host for the service worker installation.

Additional Setup & Configuration Resources

See the official OneSignal WebSDK reference for information on all available SDK functions, events, and listeners.

Share Your Feedback

If you’ve had a chance to use our new ReactJS SDK and have any feedback or suggestions you’d like to share, please do reach out to us on the GitHub repository or on our Discord server.

If you encounter any bugs or technical issues while using our new ReactJS SDK, we want to know so we can make things right. Please be sure to file a report on our GitHub repository.

If you’ve found the plugin useful, we’d appreciate it if you leave us a review on G2.

Join our Discord Server