Angular Integration

In-App Notification Widget for Angular Applications

Add a notification bell and inbox to your Angular app with one script tag. No Angular SDK or npm package to install. Works with Angular 14 through 17+. Real-time delivery via SSE — no RxJS complexity needed.

Get Started Free Learn More

Why Notilayer for Angular

Built to work with Angular, not against it

No framework-specific SDK. No RxJS boilerplate. One script tag that works with every Angular version.

Shadow DOM Isolation

Widget renders in its own Shadow DOM. No conflicts with Angular's ViewEncapsulation — Emulated, ShadowDom, or None.

No RxJS Overhead

Real-time delivery is handled by SSE inside the widget. No Observables, no Subjects, no subscription management for notifications.

Zero Dependencies

No npm package to install. No peer dependency conflicts. One script tag in index.html — your Angular build stays untouched.

All Angular Versions

Works with Angular 14, 15, 16, 17, and beyond. Standalone components, NgModules, or signals — the widget does not care.

Step 1

Add the script tag to index.html

Open your src/index.html and add the Notilayer widget script before the closing body tag. Use the defer attribute so it loads after the DOM is ready. That is it for the HTML side.

Open src/index.html

The main HTML file that Angular CLI generates for every project.

Paste the script tag

Place it right before the closing </body> tag.

Widget loads automatically

The bell icon appears once the script finishes loading. No Angular module import needed.

src/index.html

index.html

<!-- src/index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular App</title>
</head>
<body>
  <app-root></app-root>
  <script
    src="https://api.notilayer.com/widget/widget.js"
    defer
  ></script>
</body>
</html>

app.component.ts

// app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  constructor(private authService: AuthService) {}

  ngAfterViewInit() {
    (window as any).Notilayer.init({
      projectId: 'YOUR_APP_ID',
      userId: this.authService.userId,
    });
  }
}

Step 2

Initialize in ngAfterViewInit

Call window.Notilayer.init() inside your component's ngAfterViewInit lifecycle hook. Pass your project ID and user ID. The widget connects to real-time SSE automatically — no RxJS Observables required.

Use ngAfterViewInit so the DOM is ready when the widget initializes
Pass the authenticated user ID from your AuthService
SSE connection opens automatically after initialization

Step 3

Send notifications from your backend

Use the Notilayer REST API to send notifications from any backend — Node.js, Python, Go, or any language that can make HTTP requests. Notifications arrive in your Angular app's widget in real time via SSE.

Simple REST API

One POST request with your API key, user ID, title, and body. That is it.

Real-time delivery

Notifications appear in the Angular widget instantly. No polling or manual refresh.

Batch support

Send to multiple users in a single API call. See our Node.js backend guide.

Backend API Call

server.js

// Send a notification from your backend
const res = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.NOTILAYER_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    userId: 'user_123',
    title: 'New comment on your post',
    body: 'Sarah left a comment on "Getting Started".',
  }),
});

Compatibility

Works with every Angular version

The widget is framework-agnostic by design. It loads via a script tag — no Angular-specific code paths, no version coupling.

Angular 14

Standalone components

Angular 15

Stable standalone

Angular 16

Signals preview

Angular 17+

New control flow

FAQ

Angular notification widget questions

Do I need an Angular-specific SDK for Notilayer?

No. Notilayer works with a single script tag added to your index.html. There is no Angular-specific npm package or SDK to install. You initialize the widget by calling window.Notilayer.init() in your component's ngAfterViewInit lifecycle hook. This keeps your Angular dependency tree clean.

Does Notilayer work with Angular's ViewEncapsulation?

Yes. The Notilayer widget renders inside its own Shadow DOM, which is completely independent of Angular's ViewEncapsulation strategy. Whether you use Emulated, ShadowDom, or None encapsulation, the widget styles remain fully isolated. Your component styles will not leak into the widget, and the widget will not affect your components.

Which Angular versions does Notilayer support?

Notilayer works with Angular 14, 15, 16, 17, and newer versions. Since the widget loads via a script tag and does not depend on any Angular-specific APIs, it is compatible with any Angular version that supports standard browser APIs. It also works with standalone components introduced in Angular 14+.

Can I use Notilayer with Angular SSR?

Yes. The script tag loads client-side only, so it does not interfere with Angular Universal or the new built-in SSR in Angular 17+. Use isPlatformBrowser to guard the Notilayer.init() call in your component if needed. The widget will initialize after the page hydrates in the browser.

Explore more: Home · React Bell Guide · Next.js Notifications · Node.js Backend

Add Notifications to Your Angular App

One script tag. No Angular SDK. Real-time delivery. Free plan included.

Get Started Free View Pricing