How to Integrate Angular with Your Headless CMS

What is Angular?

Angular is a TypeScript framework from Google for building single-page apps, server-rendered apps, and large web front ends with routing, forms, dependency injection, and RxJS built in. Teams use it for enterprise dashboards, ecommerce storefronts, portals, documentation sites, and internal tools where typed code, long-lived architecture, and predictable releases matter.

Why integrate Angular with a headless CMS?

Angular teams often hit the same content bottleneck: the app is well-structured, but the content feeding it isn't. Marketing pages live in one tool, product copy in another, help docs in a third, and releases depend on someone opening a pull request to change text. That works for a 12-page site. It gets painful when you have 400 product detail pages, 3 locales, and weekly campaign updates.

Architecture overview

A typical Angular integration starts with structured content in Sanity's Content Lake. Editors publish a document in Sanity Studio, such as a page, product story, or help article. A GROQ query selects only the fields the Angular route needs, including referenced content like author, category, related products, or image asset URLs. When the document is published, a Sanity webhook fires with the changed document ID, type, and slug. You can send that webhook to an Angular SSR server, a small Node middleware service, or a Sanity Function. The handler uses @sanity/client to fetch the latest content with GROQ, then updates the cache or API endpoint that Angular reads through HttpClient. For static Angular deployments, the same event can call a hosting build hook or purge a CDN path for /products/:slug. For SSR deployments, Angular can render the updated route on the next request, while the end user sees the current content without waiting for an editor or developer to coordinate a manual release.

Common use cases

Step-by-step integration

1. 1

   Create or prepare your Angular app

   Start with Angular CLI if you're building fresh: npm create angular@latest my-app. Add routing if you'll render pages by slug, and add HttpClient with provideHttpClient() in your app config. If you need server-side rendering, enable Angular SSR so your app can expose server routes or read fresh content during rendering.

2. 2

   Install the Sanity client

   Install the JavaScript client with npm install @sanity/client. Keep read tokens on the server when possible. For public, read-only browser fetching, use a dataset configured for public reads and set useCdn based on freshness needs. useCdn: true is faster for mostly static pages. useCdn: false reads the latest content.

3. 3

   Model content in Sanity Studio

   Create schemas that match Angular routes and components. A page schema might include title, slug, body, seoTitle, seoDescription, heroImage, sections, and references to author or category documents. This keeps Angular components predictable because they receive typed JSON, not unstructured page blobs.

4. 4

   Write GROQ queries for Angular routes

   Create one query per route or view model. For example, fetch *[_type == 'page' && slug.current == $slug][0]{title, 'slug': slug.current, seoTitle, body, heroImage{asset->{url}}}. Add projections for references so Angular doesn't need extra round trips for common joins.

5. 5

   Create the sync path

   For Angular SSR, add a webhook endpoint in your Node server or middleware that receives Sanity publish events, fetches the updated document, and refreshes the cache used by Angular. For static Angular hosting, point the webhook or a Sanity Function at your hosting provider's deploy hook or cache purge API.

6. 6

   Test the frontend experience

   Publish a test document in Sanity Studio, confirm the webhook fires, inspect the GROQ response, and load the Angular route. Test at least three cases: a new slug, an edited existing page, and a deleted or unpublished document. Add fallback states in Angular for 404s, draft gaps, and slow network responses.

Code example

Minimal Angular SSR-style webhook flow. Sanity sends a publish webhook, the server fetches the latest document with GROQ, and Angular reads the updated cache through HttpClient.

import express from 'express';
import { createClient } from '@sanity/client';

const app = express();
app.use(express.json());

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2025-02-19',
  token: process.env.SANITY_READ_TOKEN,
  useCdn: false
});

const pageCache = new Map<string, unknown>();

app.post('/api/sanity-webhook', async (req, res) => {
  const slug = req.body?.slug?.current || req.body?.slug;
  if (!slug) return res.status(400).send('Missing slug');

  const page = await sanity.fetch(
    `*[_type == "page" && slug.current == $slug][0]{
      title,
      "slug": slug.current,
      seoTitle,
      body,
      heroImage{asset->{url}}
    }`,
    { slug }
  );

  pageCache.set(slug, page);
  res.status(204).end();
});

app.get('/api/pages/:slug', (req, res) => {
  const page = pageCache.get(req.params.slug);
  if (!page) return res.status(404).json({ error: 'Not found' });
  res.json(page);
});

export default app;

// Angular service
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class PageService {
  private http = inject(HttpClient);

  getPage(slug: string) {
    return this.http.get(`/api/pages/${slug}`);
  }
}

How Sanity + Angular works

CMS approaches to Angular

Keep building

Explore related integrations to complete your content stack.