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:
A full Portable Text implementation for Angular
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.
import{ createClient }from'@sanity/client';exportconst 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:
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 />
`,})exportclassAppComponent{}
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:
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.
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!
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.