Easily restore your project to a previous version with our new Instant One-click Backup Recovery

Headless CMS for Angular

Hygraph is the ideal Headless CMS for Angular websites and applications. Read further to learn how our API-first CMS allows you to add components to your Angular apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Set up your GraphQL query

To start fetching the content from the GraphQL API you would need first to add Hygraph's GraphQL endpoint in the module where you set up Apollo Client, usually in the AppModule.

Within the providers array, the Apollo Client is configured with the GraphQL endpoint and initialized with an HTTP link to enable network requests to the GraphQL server. This setup is crucial for enabling the Angular application to send GraphQL queries to the specified endpoint.

import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
export class ProductService {
constructor(private apollo: Apollo) {}
fetchProducts() {
const GET_PRODUCTS_QUERY = gql`
query GetProducts {
products {
name
description
image
availability
slug
}
}
`;
return this.apollo.watchQuery<any>({
query: GET_PRODUCTS_QUERY,
context: {
headers: {
Authorization: 'Bearer YOUR_HYGRAPH_TOKEN'
}
}
}).valueChanges;
}
}

Step #2 - Use the data in an Angular component

After that you can use the data in your Angular component. The Apollo service is injected into the component's constructor. The ngOnInit lifecycle hook is used to execute the GraphQL query through the Apollo Client.

The query result is then stored in a component property, products, which can be used to display the data in the component's template. This approach makes it easy to fetch and display data from a GraphQL API in a structured and reactive manner.

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
@Component({
selector: 'app-product-display',
template: `
<div *ngIf="products">
<div *ngFor="let product of products">
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<img [src]="product.image" alt="{{ product.name }}">
<p>Availability: {{ product.availability }}</p>
<p>Slug: {{ product.slug }}</p>
</div>
</div>
`,
})
export class ProductDisplayComponent implements OnInit {
products: any;
constructor(private productService: ProductService) {}
ngOnInit() {
this.productService.fetchProducts().subscribe(result => {
this.products = result.data.products;
});
}
}

Start building with Angular and Hygraph

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Angular project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Angular website or app.

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Examples

Look at some of the example projects to see Hygraph in action.

Why Hygraph

Choosing Hygraph for your Angular project

Integrating a GraphQL-native headless CMS with an Angular app benefits both developers and content editors. Developers enjoy GraphQL's precise data fetching, enhancing app performance and aligning with Angular's reactive architecture.

Content editors get a user-friendly interface for managing content, independent of the app's tech. This setup streamlines workflows, ensuring efficient content updates and a dynamic collaboration between developers and content teams.

angular cms

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects