Angular Example for Template Hierarchy and Data Fetching

Author: alexwpengine

examples/angular/template-hierarchy-data-fetching/example-app/README.md

@@ -1,59 +1,18 @@
-# MyApp
+# Template Hierarchy and Data Fetching
 
 This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.5.
 
 ## Development server
 
 To start a local development server, run:
 
-```bash
-ng serve
-```
+`npm run backend:start` - starts the backend server for template fetching at http://localhost:3000/api/templates
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
+`npm run example:start` - starts WordPress and Angular project
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## FAQ
+1. I get "Page Not Found
+Sorry, the page you are looking for does not exist. Please check the URL." when opening the Angular app.
+- Run `npm run backend:start` and verify that http://localhost:3000/api/templates returns correct data

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.routes.server.ts

@@ -1,8 +1,17 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
+//https://angular.dev/guide/ssr
 export const serverRoutes: ServerRoute[] = [
   {
-    path: '**',
+    path: '',
+    renderMode: RenderMode.Client,
+  },
+  {
+    path: 'about',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: '**',
+    renderMode: RenderMode.Server,
+  },
 ];

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.routes.ts

@@ -2,5 +2,7 @@ import { Routes } from '@angular/router';
 import { DynamicContentComponent } from './components/dynamic-content/dynamic-content.component';
 
 export const routes: Routes = [
+  { path: '', component: DynamicContentComponent },
+  { path: 'about', component: DynamicContentComponent },
   { path: '**', component: DynamicContentComponent },
 ];

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comment-form/comment-form.component.ts

@@ -180,18 +180,4 @@ export class CommentFormComponent {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
   }
-
-  /**
-   * Simple URL validation (if provided)
-   */
-  private isValidUrl(url: string): boolean {
-    if (!url.trim()) return true; // Empty URL is valid (optional field)
-
-    try {
-      new URL(url);
-      return true;
-    } catch {
-      return false;
-    }
-  }
 }

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comment-thread/comment-thread.component.ts

@@ -1,22 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-export interface Comment {
-  id: string;
-  content: string;
-  author: {
-    node: {
-      name: string;
-      url?: string;
-      avatar?: {
-        url: string;
-      };
-    };
-  };
-  date: string;
-  parentId?: string;
-  replies?: Comment[];
-}
+import { formatDate } from '../../../utils/utils';
+import { Comment } from '../../../interfaces/comment.interface';
 
 @Component({
   selector: 'app-comment-thread',
@@ -29,40 +14,21 @@ export class CommentThreadComponent {
   @Input() comment!: Comment;
   @Output() reply = new EventEmitter<{ author: string; parentId: string }>();
 
-  /**
-   * Handle reply button click
-   */
   onReply(): void {
     this.reply.emit({
       author: this.comment.author.node.name,
       parentId: this.comment.id,
     });
   }
 
-  /**
-   * Handle nested reply events
-   */
   onNestedReply(replyData: { author: string; parentId: string }): void {
     this.reply.emit(replyData);
   }
 
-  /**
-   * Format date for display
-   */
   formatDate(dateString: string): string {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
+    return formatDate(dateString);
   }
 
-  /**
-   * Get initials from name for avatar placeholder
-   */
   getInitials(name: string): string {
     return name
       .split(' ')
@@ -72,9 +38,6 @@ export class CommentThreadComponent {
       .toUpperCase();
   }
 
-  /**
-   * Track by function for *ngFor performance
-   */
   trackByCommentId(index: number, comment: Comment): string {
     return comment.id;
   }

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/comments/comments.component.ts

@@ -2,13 +2,14 @@ import { Component, Input, OnInit, signal, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommentFormComponent } from './comment-form/comment-form.component';
 import { CommentThreadComponent } from './comment-thread/comment-thread.component';
-import { GraphQLService, gql } from '../../utils/graphql.service';
+import { GraphQLService, gql, fetchGraphQL } from '../../utils/graphql.service';
 import { EmptyStateComponent } from '../empty-state/empty-state.component';
 import { LoadingComponent } from '../loading/loading.component';
 import {
   Comment,
   ReplyData,
-  PageInfo,
+  CommentPageInfo,
+  CommentResponse,
 } from '../../interfaces/comment.interface';
 
 @Component({
@@ -34,7 +35,7 @@ export class CommentsComponent implements OnInit {
   error = signal<any>(null);
 
   allComments = signal<Comment[]>([]);
-  pageInfo = signal<PageInfo>({ hasNextPage: false, endCursor: null });
+  pageInfo = signal<CommentPageInfo>({ hasNextPage: false, endCursor: null });
   loadingMore = signal<boolean>(false);
 
   replyData = signal<ReplyData | null>(null);
@@ -59,44 +60,28 @@ export class CommentsComponent implements OnInit {
   }
 
   private async loadInitialComments(): Promise<void> {
-    try {
-      this.loading.set(true);
-      this.error.set(null);
-
-      const query = this.getCommentsQuery(this.contentType);
-      const variables = {
-        postId: this.postId,
-        first: this.commentsPerPage,
-        after: null, // Always null for initial load
-      };
-
-      return new Promise((resolve, reject) => {
-        this.graphqlService.query<any>(query, variables).subscribe({
-          next: (response) => {
-            this.data.set(response);
-
-            const contentData = response[this.contentType];
-            if (contentData?.comments?.nodes) {
-              this.allComments.set([...contentData.comments.nodes]);
-              this.pageInfo.set(contentData.comments.pageInfo);
-            }
-
-            this.loading.set(false);
-            resolve();
-          },
-          error: (error) => {
-            console.error('❌ Error loading comments:', error);
-            this.error.set(error);
-            this.loading.set(false);
-            reject(error);
-          },
-        });
+    this.loading.set(true);
+    this.error.set(null);
+
+    fetchGraphQL<CommentResponse>(this.getCommentsQuery(this.contentType), {
+      postId: this.postId,
+      first: this.commentsPerPage,
+      after: null,
+    })
+      .then((response) => {
+        this.data.set(response);
+        const contentData = (response as any)[this.contentType];
+        if (contentData?.comments?.nodes) {
+          this.allComments.set([...contentData.comments.nodes]);
+          this.pageInfo.set(contentData.comments.pageInfo);
+        }
+      })
+      .catch((error) => {
+        this.error.set(error);
+      })
+      .finally(() => {
+        this.loading.set(false);
       });
-    } catch (error) {
-      console.error('Error loading comments:', error);
-      this.error.set(error);
-      this.loading.set(false);
-    }
   }
 
   private getCommentsQuery(contentType: string): string {
@@ -216,7 +201,7 @@ export class CommentsComponent implements OnInit {
   }
 
   handleCommentSubmit(commentData: any): void {
-    console.log('Comment submitted:', commentData);
+    //console.log('Comment submitted:', commentData);
   }
 
   /**

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/dynamic-content/dynamic-content.component.html

@@ -1,8 +1,3 @@
-<!-- Debug info (remove in production) -->
-<div class="debug-info" *ngIf="false">
-  <pre>{{ getDebugInfo() | json }}</pre>
-</div>
-
 <!-- Loading state -->
 <ng-container *ngIf="isLoading()">
   <app-loading></app-loading>