refactor: migrate to signal inputs

Author: JasonWeinzierl

src/bhs-web-angular-app/eslint.config.mjs

@@ -264,6 +264,12 @@ export default tseslint.config(gitignore(), {
         style: 'kebab-case',
       },
     ],
+    '@angular-eslint/prefer-signals': [
+      'error',
+      {
+        useTypeChecking: true,
+      },
+    ],
 
     // Allow Angular modules with only a decorator.
     '@typescript-eslint/no-extraneous-class': [

src/bhs-web-angular-app/src/app/features/blog/components/categories-list-view/categories-list-view.component.html

@@ -1,12 +1,12 @@
-@if (!isLoading) {
+@if (!isLoading()) {
   <div class="list-group list-group-flush">
-  @if (error) {
+  @if (error()) {
     <span class="list-group-item list-group-item-danger">
-      {{error}}
+      {{error()}}
     </span>
   }
 
-  @for (category of categories; track category.slug) {
+  @for (category of categories(); track category.slug) {
     <a [routerLink]="['/apps/blog/category', category.slug]"
       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
       {{category.name}}

src/bhs-web-angular-app/src/app/features/blog/components/categories-list-view/categories-list-view.component.spec.ts

@@ -26,31 +26,31 @@ describe('CategoriesListViewComponent', () => {
   });
 
   it('should show loading', () => {
-    expect(component.isLoading).toBe(false); // off at first
+    expect(component.isLoading()).toBe(false); // off at first
 
     fixture.componentRef.setInput('isLoading', true);
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(component.isLoading).toBe(true);
+    expect(component.isLoading()).toBe(true);
     expect(element.querySelector('.list-group .placeholder-glow')).toBeTruthy(); // should show placeholder
   });
 
   it('should show error', () => {
-    expect(component.error).toBeUndefined(); // no error at first
+    expect(component.error()).toBeUndefined(); // no error at first
 
     fixture.componentRef.setInput('error', 'An error occurred.');
     fixture.detectChanges();
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(component.error).toBeDefined();
+    expect(component.error()).toBeDefined();
     expect(element.querySelector('.list-group .list-group-item-danger')).toBeTruthy(); // should show danger banner
   });
 
   it('should show each category', () => {
-    expect(component.categories).toHaveLength(0); // empty at first
+    expect(component.categories()).toHaveLength(0); // empty at first
 
     fixture.componentRef.setInput('categories', [{
       slug: 'newsletters',
@@ -65,7 +65,7 @@ describe('CategoriesListViewComponent', () => {
 
     const element = fixture.nativeElement as HTMLElement;
 
-    expect(component.categories).toHaveLength(2);
+    expect(component.categories()).toHaveLength(2);
     expect(element.querySelector('.list-group')?.children).toHaveLength(2);
 
     const linkDebugElements = fixture.debugElement.queryAll(By.directive(RouterLink));

src/bhs-web-angular-app/src/app/features/blog/components/categories-list-view/categories-list-view.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { CategorySummary } from '@data/blog';
 
@@ -10,7 +10,7 @@ import { CategorySummary } from '@data/blog';
   imports: [RouterLink],
 })
 export class CategoriesListViewComponent {
-  @Input() isLoading = false;
-  @Input() error?: string | null;
-  @Input() categories: Array<CategorySummary> = [];
+  readonly isLoading = input(false);
+  readonly error = input<string | null>();
+  readonly categories = input<Array<CategorySummary>>([]);
 }

src/bhs-web-angular-app/src/app/features/blog/components/edit-blog-entry-form/edit-blog-entry-form.component.html

@@ -8,7 +8,7 @@
   <div class="mb-3">
     <label for="inputCategories" class="form-label">Categories</label>
     <select multiple class="form-select" id="inputCategories" name="categories" formControlName="categories">
-      @for (c of allCategories; track c.slug) {
+      @for (c of allCategories(); track c.slug) {
         <option [ngValue]="c.slug">{{c.name}}</option>
       }
     </select>

src/bhs-web-angular-app/src/app/features/blog/components/edit-blog-entry-form/edit-blog-entry-form.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnChanges, Output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, input, OnChanges, Output, signal } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -20,39 +20,40 @@ import { Category, categorySchema, Post, PostRequest } from '@data/blog';
 export class EditBlogEntryFormComponent implements OnChanges {
   private readonly fb = inject(FormBuilder);
 
-  @Input() initialPost?: Post;
-  @Input() currentAuthor?: Author | null;
-  @Input() allCategories: Array<Category> = [];
+  readonly initialPost = input<Post>();
+  readonly currentAuthor = input<Author | null>();
+  readonly allCategories = input<Array<Category>>([]);
 
   @Output() readonly publish = new EventEmitter<PostRequest>();
 
-  cancelRoute = signal<Array<string>>(['/apps/blog']);
+  readonly cancelRoute = signal<Array<string>>(['/apps/blog']);
   editFormGroup = this.fb.nonNullable.group({
     title: ['', [Validators.required]],
     categories: [[] as Array<string>],
     publishDate: [new Date()],
     contentMarkdown: [''],
   });
 
-  authorWarning = signal<string | null>(null);
+  readonly authorWarning = signal<string | null>(null);
 
   ngOnChanges(): void {
-    this.cancelRoute.set(this.initialPost ? ['/apps/blog/entry', this.initialPost.slug] : ['/apps/blog']);
+    const initialPost = this.initialPost();
+    this.cancelRoute.set(initialPost ? ['/apps/blog/entry', initialPost.slug] : ['/apps/blog']);
 
     this.editFormGroup.reset({
-      title: this.initialPost?.title ?? '',
-      categories: this.initialPost?.categories.map(x => x.slug) ?? [],
-      publishDate: this.initialPost?.datePublished ?? new Date(),
-      contentMarkdown: this.initialPost?.contentMarkdown ?? '',
+      title: initialPost?.title ?? '',
+      categories: initialPost?.categories.map(x => x.slug) ?? [],
+      publishDate: initialPost?.datePublished ?? new Date(),
+      contentMarkdown: initialPost?.contentMarkdown ?? '',
     });
 
     this.authorWarning.set(this.isChangingAuthor()
-      ? `Author is changing from '${this.initialPost?.author?.username ?? '(null)'}' to '${this.currentAuthor?.username ?? '(null)'}'.`
+      ? `Author is changing from '${initialPost?.author?.username ?? '(null)'}' to '${this.currentAuthor()?.username ?? '(null)'}'.`
       : null);
   }
 
   private isChangingAuthor(): boolean {
-    return !this.initialPost?.author && !!this.currentAuthor;
+    return !this.initialPost()?.author && !!this.currentAuthor();
   }
 
   onSubmit(): void {
@@ -61,11 +62,11 @@ export class EditBlogEntryFormComponent implements OnChanges {
     const request: PostRequest = {
       title: raw.title,
       contentMarkdown: raw.contentMarkdown,
-      filePath: this.initialPost?.filePath ?? null,
-      photosAlbumSlug: this.initialPost?.photosAlbumSlug ?? null,
-      author: this.isChangingAuthor() ? this.currentAuthor ?? null : this.initialPost?.author ?? null, // TODO: support multiple authors.
+      filePath: this.initialPost()?.filePath ?? null,
+      photosAlbumSlug: this.initialPost()?.photosAlbumSlug ?? null,
+      author: this.isChangingAuthor() ? this.currentAuthor() ?? null : this.initialPost()?.author ?? null, // TODO: support multiple authors.
       datePublished: raw.publishDate,
-      categories: this.allCategories.filter(c => raw.categories.includes(c.slug)).map(c => categorySchema.parse(c)),
+      categories: this.allCategories().filter(c => raw.categories.includes(c.slug)).map(c => categorySchema.parse(c)),
     };
 
     this.publish.emit(request);

src/bhs-web-angular-app/src/app/features/blog/components/entry-album/entry-album.component.html

@@ -1,7 +1,7 @@
 <div>
   <p class="text-muted">This post contains photos:</p>
-  @for (photo of album.photos; track photo.id) {
-    <a [routerLink]="['/apps/photos/album', album.slug, 'photo', photo.id]" class="d-inline-block m-1">
+  @for (photo of album().photos; track photo.id) {
+    <a [routerLink]="['/apps/photos/album', album().slug, 'photo', photo.id]" class="d-inline-block m-1">
       <img [ngSrc]="photo.imagePath" class="img-fluid" [alt]="photo.name" width="200" height="200">
     </a>
   }

src/bhs-web-angular-app/src/app/features/blog/components/entry-album/entry-album.component.spec.ts

@@ -22,14 +22,14 @@ describe.skip('EntryAlbumComponent', () => {
 
     fixture = TestBed.createComponent(EntryAlbumComponent);
     component = fixture.componentInstance;
-    component.album = {
+    fixture.componentRef.setInput('album', {
       slug: 'album-one',
       photos: [{
         id: 'photo-one',
         imagePath: 'http://example.com/photo-one.jpg',
         datePosted: new Date(),
       }],
-    };
+    });
     fixture.detectChanges();
   });
 

src/bhs-web-angular-app/src/app/features/blog/components/entry-album/entry-album.component.ts

@@ -1,5 +1,5 @@
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { AlbumPhotos } from '@data/photos';
 
@@ -11,5 +11,5 @@ import { AlbumPhotos } from '@data/photos';
   imports: [RouterLink, NgOptimizedImage],
 })
 export class EntryAlbumComponent {
-  @Input({ required: true }) album!: AlbumPhotos;
+  readonly album = input.required<AlbumPhotos>();
 }

src/bhs-web-angular-app/src/app/features/blog/components/post-card/post-card.component.html

@@ -1,30 +1,31 @@
 <div class="card">
   <div class="card-header">
     <h2 class="card-title">
-      <a [routerLink]="['/apps/blog/entry', post.slug]">
-        {{post.title}}
+      <a [routerLink]="['/apps/blog/entry', post().slug]">
+        {{post().title}}
       </a>
     </h2>
     <p class="card-subtitle">
       Posted
-      @if (post.author) {
+      @let author = post().author;
+      @if (author) {
         by
-        <a [routerLink]="['/apps/profile', post.author.username]">{{post.author.name}}</a>
+        <a [routerLink]="['/apps/profile', author.username]">{{author.name}}</a>
       }
       on
-      <app-date [datetime]="post.datePublished" />
+      <app-date [datetime]="post().datePublished" />
     </p>
   </div>
   <div class="card-body">
-    <p>{{post.contentPreview}}</p>
+    <p>{{post().contentPreview}}</p>
     <p>
-      <a class="btn btn-secondary" role="button" [routerLink]="['/apps/blog/entry', post.slug]">
+      <a class="btn btn-secondary" role="button" [routerLink]="['/apps/blog/entry', post().slug]">
         Read Full Post &raquo;
       </a>
     </p>
   </div>
   <div class="card-footer">
-    @for (cat of post.categories; track cat.slug) {
+    @for (cat of post().categories; track cat.slug) {
       <span class="me-2">{{cat.name}}</span>
     }
   </div>