10. Angular Universal + Headless WordPress 상세 가이드

// src/app/services/wp.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class WpService {
  constructor(private http: HttpClient) {}

  getPosts() {
    return this.http.get<any[]>('https://your-wp-site.com/wp-json/wp/v2/posts');
  }
}

// src/app/components/posts/posts.component.ts
import { Component, OnInit } from '@angular/core';
import { WpService } from '../../services/wp.service';

@Component({
  selector: 'app-posts',
  template: `
    <h1>WordPress Posts</h1>
    <ul>
      <li *ngFor="let post of posts">{{ post.title.rendered }}</li>
    </ul>
  `
})
export class PostsComponent implements OnInit {
  posts: any[] = [];

  constructor(private wp: WpService) {}

  ngOnInit() {
    this.wp.getPosts().subscribe(data => this.posts = data);
  }
}

ng add apollo-angular

// src/app/services/wp-graphql.service.ts
import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';

@Injectable({ providedIn: 'root' })
export class WpGraphqlService {
  constructor(private apollo: Apollo) {}

  getPosts() {
    return this.apollo.query({
      query: gql`
        {
          posts {
            nodes {
              id
              title
              content
            }
          }
        }
      `
    });
  }
}