Integration time5 minutes

How to Add Ads to Angular with Buzer (2026 Guide)

Angular is a full-featured framework for building enterprise-grade web applications. Buzer integrates with Angular through a custom directive that manages ad lifecycle and zone-safe DOM updates. Add ads to your Angular app in about 5 minutes with full TypeScript support.

Step-by-Step Integration

Sign up for Buzer

Create your publisher account at buzer.xyz. Authenticate with Face ID or Touch ID for instant access.

Add the Buzer script to index.html

Open src/index.html in your Angular project and add the Buzer script before the closing body tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular App</title>
  <base href="/">
</head>
<body>
  <app-root></app-root>
  <script async src="https://cdn.buzer.xyz/x402-ad.js"></script>
</body>
</html>

Create a BuzerAd component

Generate a component for ad placements. The component uses AfterViewInit to trigger ad loading after the DOM element is rendered.

javascript

import { Component, Input, ElementRef, AfterViewInit, ViewChild } from '@angular/core';

declare global {
  interface Window {
    buzer?: { refresh: (el: HTMLElement) => void };
  }
}

@Component({
  selector: 'buzer-ad',
  standalone: true,
  template: `
    <div #adContainer
      data-buzer-ad
      [attr.data-size]="size"
      style="display:flex;justify-content:center">
    </div>
  `,
})
export class BuzerAdComponent implements AfterViewInit {
  @Input() size = '300x250';
  @ViewChild('adContainer') adContainer!: ElementRef;

  ngAfterViewInit() {
    if (window.buzer && this.adContainer?.nativeElement) {
      window.buzer.refresh(this.adContainer.nativeElement);
    }
  }
}

Use the component in your templates

Import and use the BuzerAdComponent in any of your Angular templates. Pass the ad size as an input.

javascript

import { Component } from '@angular/core';
import { BuzerAdComponent } from './buzer-ad.component';

@Component({
  selector: 'app-blog-post',
  standalone: true,
  imports: [BuzerAdComponent],
  template: `
    <article>
      <h1>{{ title }}</h1>
      <buzer-ad size="728x90"></buzer-ad>
      <div [innerHTML]="content"></div>
      <buzer-ad size="300x250"></buzer-ad>
    </article>
  `,
})
export class BlogPostComponent {
  title = 'My Article';
  content = '<p>Article content here...</p>';
}

Angular-Friendly Ad Integration

Angular's strict security model and zone-based change detection require ad scripts to work differently than on static HTML pages. Buzer's DOM observation approach is fully compatible with Angular because it watches for elements via MutationObserver, which fires outside Angular's zone.

This means no ExpressionChangedAfterItHasBeenCheckedError errors, no unnecessary change detection cycles, and no conflicts with Angular's rendering pipeline.

The standalone component pattern (Angular 17+) makes integration clean — import BuzerAdComponent where you need it, no module declarations required.

Handling Angular Route Changes

Angular's router destroys and recreates components on navigation. The BuzerAdComponent's AfterViewInit lifecycle hook ensures ads are refreshed when the component mounts on a new route.

For lazy-loaded routes, the Buzer script only needs to be loaded once in index.html. It remains active and detects new ad containers regardless of which lazy module is loaded.

If you use Angular Universal for server-side rendering, the ad containers will be in the initial HTML. The Buzer script runs client-side during hydration and fills them after the browser takes over.

Frequently Asked Questions

Does Buzer work with Angular Universal (SSR)?+

Yes. The Buzer script runs client-side only. With Angular Universal, the ad container divs are rendered in the server HTML, and the Buzer script fills them with ads after client-side hydration.

Is there a Buzer npm package for Angular?+

Currently, Buzer integrates via a script tag and HTML data attributes. The BuzerAdComponent shown in our guide is about 20 lines of code and provides a clean Angular integration without needing an npm package.

Can I use Buzer with Angular Material?+

Yes. The BuzerAdComponent is a standalone component that can be used inside Angular Material cards, toolbars, sidenavs, or any other Material component. Place it wherever you would place any other Angular component.

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start Earning Advertise With Us