Headless CMS for Angular

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;
  }
}

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;
    });
  }
}