Refactoring post component to use injectables.

src/app/custom-pages/blog-archive/blog-archive.component.ts

@@ -11,6 +11,7 @@ import { PostBoxComponent } from '../../components/post-box/post-box.component';
   selector: 'app-blog-archive',
   standalone: true,
   imports: [CommonModule, PostBoxComponent],
+  providers: [PostService],
   template: `
     <ng-container *ngIf="posts$ | async; let posts">
       <h1 class="text-indigo-600">Latest Posts</h1>

src/app/models/post.ts

@@ -1,9 +1,9 @@
 export default class Post {
-  filename: string;
-  link: string;
-  title: string;
-  date: string;
-  image: string;
-  categories: string;
-  tags: string;
+  filename?: string;
+  link?: string;
+  title?: string;
+  date?: string;
+  image?: string;
+  categories?: string;
+  tags?: string;
 }

src/app/post/post.component.ts

@@ -1,9 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, inject } from '@angular/core';
 import { PostService } from '../services/post.service';
-import Post from '../models/post';
 import { PageHeadService } from '../services/page-head.service';
-import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { TagsListComponent } from '../components/tags-list/tags-list.component';
@@ -20,6 +17,7 @@ import { UtterancesDirective } from '../directives/utterances.directive';
     NgOptimizedImage,
     UtterancesDirective,
   ],
+  providers: [PostService],
   template: `
     <div class="content" *ngIf="post$ | async; let post">
 
@@ -32,41 +30,28 @@ import { UtterancesDirective } from '../directives/utterances.directive';
         <div>{{ post.title }}</div>
       </h1>
 
-      <img [ngSrc]="postImgUrl" class="w-full" width="500" height="400" alt="Post Featured Image" />
+      <img [ngSrc]="postImgUrl" class="w-full" width="500" height="400" alt="Post Featured Image"/>
 
       <markdown class="" [src]="this.postUrl"></markdown>
 
       <div [appUtterances]="post.title"></div>
     </div>
   `,
 })
-export class PostComponent implements OnInit {
-  post$: Observable<Post>;
+export class PostComponent {
+  #pageHeadService = inject(PageHeadService);
+  post$ = inject(PostService).postDetails.pipe(
+    tap({
+      next: ({link, image, title}) => {
+        this.postUrl = `/_assets/posts/${link}.md`;
+        this.postImgUrl = `/assets/images/${image}`;
+        this.#pageHeadService.setTitle(title);
+        this.#pageHeadService.setOpenGraphTags(title, image, `/blog/post/${link}`);
+        this.#pageHeadService.setTwitterCardData(title, image);
+      }
+    })
+  );
+
   postUrl: string;
   postImgUrl: string;
-
-  constructor(
-    private route: ActivatedRoute,
-    private postService: PostService,
-    private pageHeadService: PageHeadService
-  ) {
-  }
-
-  ngOnInit() {
-    this.route.params.subscribe((params) => {
-      this.post$ = this.postService.getPostDetails(params.title).pipe(
-        tap((post) => {
-          this.postUrl = `/_assets/posts/${post.link}.md`;
-          this.postImgUrl = `/assets/images/${post.image}`;
-          this.pageHeadService.setTitle(post.title);
-          this.pageHeadService.setOpenGraphTags(
-            post.title,
-            post.image,
-            `/blog/post/${post.link}`
-          );
-          this.pageHeadService.setTwitterCardData(post.title, post.image);
-        })
-      );
-    });
-  }
 }

src/app/services/post.service.ts

@@ -1,16 +1,15 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { default as Posts } from '../../_assets/posts/posts.json';
 import Post from '../models/post.js';
-import { mergeMap, Observable, of } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { mergeMap, Observable, of, switchMap } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class PostService {
-
-  constructor() {
-  }
+  postDetails: Observable<Post> = inject(ActivatedRoute).params.pipe(
+    switchMap(({title}) => of(Posts.Posts.filter(post => post.link === title)[0] as Post))
+  );
 
   getLatestPosts(): Observable<Post[]> {
     const sortedPosts = Posts.Posts.sort((a: Post, b: Post) => {
@@ -28,10 +27,4 @@ export class PostService {
       filter(post => post.tags?.indexOf(tag) > -1)
     );
   }
-
-  getPostDetails(link: string): Observable<Post> {
-    return new Observable(subscriber => {
-      subscriber.next(Posts.Posts.filter(post => post.link === link)[0]);
-    });
-  }
 }

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "ES2022",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],