Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Last updated July 22, 2024

Angular + Sanity CMS: Rendering Portable Text with @limitless-angular/sanity

By Alfonso Andrés López Molina

Learn to render Sanity CMS Portable Text in Angular using @limitless-angular/sanity. This guide covers setup, content fetching, and component creation, showcasing modern Angular features. Build dynamic, content-rich apps with ease.

Hey there, Angular devs!

Let's talk about content management in modern web development. Sanity CMS has become a powerful solution for handling structured content, and one of its most interesting features is Portable Text, a flexible JSON-based format for rich text.

Now, getting Portable Text to play nice with Angular can be a bit tricky. But don't worry, we've got a secret weapon: the @limitless-angular/sanity library. This package is designed to make your life easier when working with Sanity and Angular.

What's so great about @limitless-angular/sanity? Well, it gives you two main benefits:

  1. A full Portable Text implementation for Angular
  2. An Image Loader and an Image Directive explicitly designed for use with Sanity and seamless Portable Text integration.

In this guide, we'll walk you through setting up an Angular app that can render Portable Text content from Sanity CMS using this library. By the end, you'll have a functioning Angular component that can elegantly display your Sanity content.

Ready to dive in? Let's go!

Before We Start

Make sure you've got:

  • Some basic Angular and TypeScript knowledge
  • Node.js and npm installed on your machine
  • A Sanity CMS project with some Portable Text content to play with

Step 1: Set Up Your Angular Project

First, let's create a new Angular project:

ng new sanity-portable-text-demo
cd sanity-portable-text-demo

Step 2: Install Required Dependencies

Install our library and the Sanity client:

npm install @limitless-angular/sanity @sanity/client

Step 3: Set Up Your Sanity Connection

Create a new file src/app/sanity-client.ts:

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

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  useCdn: true, // set to `false` to bypass the edge cache
  apiVersion: '2023-05-03', // use current date (YYYY-MM-DD) to target the latest API 
});

Don't forget to replace 'your-project-id' and 'your-dataset' with your actual Sanity details!

Step 4: Create a Content-Fetching Service

Let's create a service to handle our Sanity queries. Create a new file src/app/content.service.ts:

import { Injectable } from '@angular/core';
import { client } from './sanity-client';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ContentService {
  getPortableTextContent(slug: string): Observable<any> {
    return from(client.fetch(`*[_type == "post" && slug.current == $slug][0].content`, { slug }));
  }
}

This service will fetch your Portable Text content from a specific Sanity document using its slug.

Note: This example assumes that your Sanity document schema includes:

  1. A `post` document type
  2. A `slug` field of type `slug` within the `post` document
  3. A `content` field that contains the Portable Text blocks for rendering

Don't worry about it, you'll see how to config this in part 2.

Step 5: Build Your Content Display Component

Now, let's create a component that'll display your Portable Text content:

ng generate component portable-text-display

Update src/app/portable-text-display/portable-text-display.component.ts:

import { Component, inject } from '@angular/core';
import { PortableTextComponent, PortableTextComponents } from '@limitless-angular/sanity';
import { ContentService } from '../content.service';
import { toSignal } from '@angular/core/rxjs-interop';
import { LinkComponent } from './link.component';

@Component({
  selector: 'app-portable-text-display',
  standalone: true,
  imports: [PortableTextComponent],
  template: `
    @if (portableTextContent(); as content) {
      <div portable-text [value]="content" [components]="customComponents"></div>
    } @else {
      <p>Hold on, content's loading...</p>
    }
  `,
})
export class PortableTextDisplayComponent {
  private contentService = inject(ContentService);
  
  portableTextContent = toSignal(
    this.contentService.getPortableTextContent('my-first-blog-post')
  );

  customComponents: PortableTextComponents = {
    marks: {
      link: LinkComponent,
    },
  };
}

Remember to replace `'my-first-blog-post'` with an actual ID from your Sanity project.

Step 6: Create a Custom Link Component

Create a new file src/app/portable-text-display/link.component.ts:

import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
import { PortableTextMarkComponent } from '@limitless-angular/sanity';

interface LinkMark {
  _type: 'link';
  href: string;
}

@Component({
  selector: 'a',
  standalone: true,
  template: `<ng-container #children />`,
  host: {
    '[href]': 'value()?.href',
    '[target]': 'target()',
    '[rel]': 'rel()',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LinkComponent extends PortableTextMarkComponent<LinkMark> {
  target = computed(() =>
    (this.value()?.href ?? '').startsWith('http') ? '_blank' : undefined,
  );

  rel = computed(() =>
    this.target() === '_blank' ? 'noindex nofollow' : undefined,
  );
}

This little component extends the PortableTextMarkComponent and adds some additional functionality for external links.

Step 7: Showcase in Your Main App

Finally, let's use our new component. Update src/app/app.component.ts:

import { Component } from '@angular/core';
import { PortableTextDisplayComponent } from './portable-text-display/portable-text-display.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PortableTextDisplayComponent],
  template: `
    <h1>Check Out This Sanity Portable Text Magic!</h1>
    <app-portable-text-display />
  `,
})
export class AppComponent {}

Step 8: Run Your Application!

You're all set! Let's see your application in action:

ng serve

Navigate to http://localhost:4200 in your browser. If all goes well, you should see your Sanity content rendered on the page!

Wrapping Up

And there you have it! You've just built an Angular app that can handle Sanity's Portable Text content from Sanity CMS. We've used some pretty cool Angular features along the way:

  • Standalone components
  • The new built-in control flow syntax
  • Dependency injection with the inject function
  • Signals with toSignal from '@angular/core/rxjs-interop'
  • A custom link component with computed properties

Remember, this is just the beginning. You can customize how different blocks render, add styling, or even get more complex with your Sanity queries. The @limitless-angular/sanity library provides much flexibility for handling various types of Portable Text content.

If you want to dive deeper, check out these resources:

Now go forth and create some awesome content-driven Angular apps! Happy coding!

Sanity – build remarkable experiences at scale

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.

Other guides by author

Angular + Sanity CMS: Mastering Images with the Sanity Image Directive (Part 3)

Explore the Sanity Image Directive and Loader from @limitless-angular/sanity to optimize and display images in Angular projects. Learn to update schemas, create an image component, and enhance your Portable Text setup. Unlock the power of dynamic image transformations and optimizations!

This is an external link at:dev.to
Alfonso Andrés López Molina
Go to Angular + Sanity CMS: Mastering Images with the Sanity Image Directive (Part 3)

Angular + Sanity CMS: Setting Up Your Sanity CMS Project with TypeScript (Part 2)

Learn to set up a Sanity CMS project with TypeScript for seamless Angular integration. This guide covers creating a Sanity project, defining schemas, configuring Studio, and connecting to Angular. It builds on the previous @limitless-angular/sanity tutorial, completing your full-stack solution.

This is an external link at:dev.to
Alfonso Andrés López Molina
Go to Angular + Sanity CMS: Setting Up Your Sanity CMS Project with TypeScript (Part 2)