The AI-Powered Headless CMS for Angular

Why Angular and Cosmic Work Well Together

Angular is a batteries-included framework: dependency injection, a real router, typed HTTP, and first-class TypeScript from day one. Cosmic is a content backend with the same shape. You get a typed SDK, structured content models, and a REST API you call from a service.

That pairing matters because Angular teams usually build for the long haul. Enterprise dashboards, marketing sites, and internal tools that stay in production for years. Keeping copy out of your component templates and behind a versioned API means a marketing edit never requires a pull request, a rebuild, or a redeploy.

Cosmic's TypeScript SDK drops directly into an Angular @Injectable() service, so any component that needs content requests it through DI, exactly like every other data source in your app.

What You Get

• REST API with sub-100ms cached responses. Globally distributed, so Angular routes resolve content fast whether you render on the server or the client.
• TypeScript SDK. @cosmicjs/sdk ships full types and a chainable query API that feels natural inside an Angular service.
• A built-in image CDN. Every uploaded asset returns an imgix_url that resizes, compresses, and format-negotiates on request, so you can build a responsive srcset from one original without adding an image pipeline to your Angular build.
• Works with Angular SSR. The same service runs during server-side rendering and prerendering, so content lands in the initial HTML.
• AI Agents. Built-in agents that generate, update, and publish content on a schedule or from a trigger.
• MCP Server. Point Cursor, Claude Code, or any MCP-compatible tool at your content model.
• CLI. Scaffold projects, sync content models, and manage buckets from the terminal.

---

Fetching Cosmic Content in Angular

Install the SDK:

npm install @cosmicjs/sdk

Add your bucket credentials to your environment file:

// src/environments/environment.ts
export const environment = {
  production: false,
  cosmicBucketSlug: 'your-bucket-slug',
  cosmicReadKey: 'your-bucket-read-key',
};

Wrap the client in an injectable service. This is the only place in your app that knows Cosmic exists:

// src/app/content/cosmic.service.ts
import { Injectable } from '@angular/core';
import { createBucketClient } from '@cosmicjs/sdk';
import { environment } from '../../environments/environment';

export interface BlogPost {
  id: string;
  title: string;
  slug: string;
  metadata: {
    excerpt?: string;
    content?: string;
  };
}

@Injectable({ providedIn: 'root' })
export class CosmicService {
  private readonly cosmic = createBucketClient({
    bucketSlug: environment.cosmicBucketSlug,
    readKey: environment.cosmicReadKey,
  });

  async getPosts(limit = 10): Promise<BlogPost[]> {
    const { objects } = await this.cosmic.objects
      .find({ type: 'blog-posts' })
      .props('id,title,slug,metadata')
      .limit(limit);

    return objects as BlogPost[];
  }

  async getPostBySlug(slug: string): Promise<BlogPost> {
    const { object } = await this.cosmic.objects
      .findOne({ type: 'blog-posts', slug })
      .props('id,title,slug,metadata');

    return object as BlogPost;
  }
}

Now consume it from a standalone component using inject() and signals:

// src/app/blog/blog-list.component.ts
import { Component, OnInit, inject, signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CosmicService, BlogPost } from '../content/cosmic.service';

@Component({
  selector: 'app-blog-list',
  standalone: true,
  imports: [RouterLink],
  template: `
    <h1>Blog</h1>
    <ul>
      @for (post of posts(); track post.id) {
        <li>
          <a [routerLink]="['/blog', post.slug]">{{ post.title }}</a>
        </li>
      }
    </ul>
  `,
})
export class BlogListComponent implements OnInit {
  private readonly cosmicService = inject(CosmicService);
  readonly posts = signal<BlogPost[]>([]);

  async ngOnInit(): Promise<void> {
    this.posts.set(await this.cosmicService.getPosts());
  }
}

That is the whole integration. No adapter layer, no custom HTTP interceptors, no schema generation step.

Rendering Images

File and image metafields come back with an imgix_url alongside the original. Append transformation parameters to it and the work happens at the edge:

readonly heroSrc = (url: string, width: number) =>
  `${url}?w=${width}&auto=format,compress`;

Because each width is just a different URL, a responsive srcset costs you nothing extra in storage or build time. The image CDN page covers the full parameter set, including face-aware cropping and AVIF format negotiation.

Server-Side Rendering

If you have added SSR with ng add @angular/ssr, the same CosmicService runs on the server during rendering and prerendering. Your content ships inside the initial HTML response, which is what search engines index and what makes the first paint useful instead of a skeleton.

One note on keys: the read key grants read-only access and is safe to ship in a client bundle for public content. Write keys must stay server-side only, in Angular SSR server code or a backend route, never in environment.ts for a browser build.

---

Key Features

REST API Built for Speed

Cosmic's API is globally distributed and returns sub-100ms responses on cached requests. Queries are plain HTTP with readable parameters, so you can inspect them in a browser, curl them in CI, and cache them at your CDN without a proprietary query language in the way.

TypeScript SDK

@cosmicjs/sdk gives you createBucketClient plus a chainable query builder. Because Angular projects are TypeScript by default, you get autocomplete and type safety on every query with zero extra configuration.

Angular SSR and Prerendering

Structured content plus server rendering is the combination that makes Angular marketing pages rank. Fetch in the service, render on the server, cache at the edge.

AI Agents

Cosmic includes AI agents you configure per capability. One agent can write and publish content against your existing schema, another can open pull requests in a connected GitHub repository, another can live in Slack as a conversational teammate.

MCP Server

Cosmic ships an MCP server, so the AI tools your team already uses can read your content model and create or update content directly from your editor.

CLI

Scaffold new projects, push content models between buckets, and script bulk operations from the terminal.

"Cosmic is: us never having to ask a developer to change anything on the backend of our website."

Maximilian Wuhr, Co-Founder at FINN

---

Pricing

Additional users are $29/user/month. The Free plan is free forever and does not require a credit card. See the full pricing page for current details.

---

Related Resources

• Headless CMS explained
• Image CDN
• Headless CMS for Vue
• Headless CMS for Nuxt
• Headless CMS for Svelte

---

Get Started Free

Cosmic is backed by Y Combinator (W19) and used in production by teams including FINN, Vuetify, and Parque Explora.

Sign up free, no credit card required

Want a guided walkthrough of how this fits your Angular stack? Book a demo with Tony.