From 0090c073a7260c4685f58acb5b74811e6444e919 Mon Sep 17 00:00:00 2001
From: David LJ <mail@davidlj95.com>
Date: Wed, 27 Nov 2024 12:30:51 +0100
Subject: [PATCH] refactor: migrate to signal-based inputs & queries + output
 fns (#865)

* refactor: migrate to signal-based inputs & queries + output fns

* refactor: revert not-so-easy-to-migrate components

* test: fix unit tests with mocked components or missing inputs

* chore: use the navigation tabs makeSut arg around
---
 .../common/simple-icon/simple-icon.component.ts  |  2 ++
 src/app/common/test-id.directive.ts              |  6 +++---
 .../navigation-tabs.component.html               |  2 +-
 .../navigation-tabs.component.spec.ts            | 16 ++++++++--------
 .../navigation-tabs/navigation-tabs.component.ts |  4 ++--
 src/app/header/tab/tab.component.spec.ts         |  4 ++--
 src/app/header/tabs/tabs.component.ts            |  2 ++
 .../toolbar-button/toolbar-button.component.html |  2 +-
 .../toolbar-button.component.spec.ts             |  2 +-
 .../toolbar-button/toolbar-button.component.ts   |  5 +++--
 .../attribute/attribute.component.html           |  2 +-
 .../attribute/attribute.component.spec.ts        |  2 +-
 .../resume-page/attribute/attribute.component.ts |  4 ++--
 .../card-header-image.component.html             |  2 +-
 .../card-header-image.component.spec.ts          |  5 ++---
 .../card-header-image.component.ts               |  6 +++---
 src/app/resume-page/chip/chip.component.spec.ts  | 10 +++++-----
 src/app/resume-page/chip/chip.component.ts       |  9 ++++-----
 .../chipped-content.component.spec.ts            | 10 +++++-----
 .../date-range/date-range.component.html         |  6 +++---
 .../date-range/date-range.component.spec.ts      |  2 +-
 .../date-range/date-range.component.ts           |  4 ++--
 .../education-item/education-item.component.ts   |  2 ++
 .../experience-item/experience-item.component.ts |  2 ++
 .../language-item/language-item.component.html   | 10 +++++-----
 .../language-item.component.spec.ts              |  2 +-
 .../language-item/language-item.component.ts     |  4 ++--
 .../language-tag/language-tag.component.ts       |  2 ++
 src/app/resume-page/link/link.component.html     |  4 ++--
 src/app/resume-page/link/link.component.spec.ts  |  5 +++--
 src/app/resume-page/link/link.component.ts       |  4 ++--
 .../project-item/project-item.component.ts       |  2 ++
 .../technology/technology.component.ts           |  2 ++
 33 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/src/app/common/simple-icon/simple-icon.component.ts b/src/app/common/simple-icon/simple-icon.component.ts
index 63eba2c8..012f3a29 100644
--- a/src/app/common/simple-icon/simple-icon.component.ts
+++ b/src/app/common/simple-icon/simple-icon.component.ts
@@ -24,6 +24,8 @@ export class SimpleIconComponent {
 
   protected _fillColor?: string
 
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) set icon(icon: SimpleIcon) {
     this.loader(icon.slug)
       .pipe(
diff --git a/src/app/common/test-id.directive.ts b/src/app/common/test-id.directive.ts
index 1f258c72..e5109f67 100644
--- a/src/app/common/test-id.directive.ts
+++ b/src/app/common/test-id.directive.ts
@@ -1,17 +1,17 @@
-import { Directive, ElementRef, Input, OnChanges } from '@angular/core'
+import { Directive, ElementRef, OnChanges, input } from '@angular/core'
 
 @Directive({
   selector: '[appTestId]',
   standalone: true,
 })
 export class TestIdDirective implements OnChanges {
-  @Input() public appTestId!: string
+  public readonly appTestId = input.required<string>()
 
   constructor(private el: ElementRef) {}
 
   ngOnChanges(): void {
     if (isDevMode) {
-      this.el.nativeElement.setAttribute(TEST_ID_ATTRIBUTE, this.appTestId)
+      this.el.nativeElement.setAttribute(TEST_ID_ATTRIBUTE, this.appTestId())
     }
   }
 }
diff --git a/src/app/header/navigation-tabs/navigation-tabs.component.html b/src/app/header/navigation-tabs/navigation-tabs.component.html
index 96913f44..b8a4ccb3 100644
--- a/src/app/header/navigation-tabs/navigation-tabs.component.html
+++ b/src/app/header/navigation-tabs/navigation-tabs.component.html
@@ -1,6 +1,6 @@
 <nav>
   <app-tabs [selectedIndex]="_selectedIndex">
-    @for (item of items; track item.displayName) {
+    @for (item of items(); track item.displayName) {
       <app-tab
         [routerLink]="item.routerLink"
         (isActiveChange)="$event ? onActiveRouteChange($index) : undefined"
diff --git a/src/app/header/navigation-tabs/navigation-tabs.component.spec.ts b/src/app/header/navigation-tabs/navigation-tabs.component.spec.ts
index 902194fc..37e5932d 100644
--- a/src/app/header/navigation-tabs/navigation-tabs.component.spec.ts
+++ b/src/app/header/navigation-tabs/navigation-tabs.component.spec.ts
@@ -33,9 +33,7 @@ describe('NavigationTabsComponent', () => {
   })
 
   it('should display all items as tabs with their route links', () => {
-    const [fixture, component] = makeSut()
-    component.items = ITEMS
-    fixture.detectChanges()
+    const [fixture] = makeSut({ items: ITEMS })
 
     const tabsElement = fixture.debugElement.query(byComponent(TabsComponent))
 
@@ -56,9 +54,7 @@ describe('NavigationTabsComponent', () => {
   })
 
   it('should mark only active page tab as selected', async () => {
-    const [fixture, component] = makeSut()
-    component.items = ITEMS
-    fixture.detectChanges()
+    const [fixture] = makeSut({ items: ITEMS })
 
     await fixture.ngZone?.run(
       async () => await RouterTestingHarness.create(FOO_ROUTE.path),
@@ -85,10 +81,14 @@ describe('NavigationTabsComponent', () => {
     ).toBeFalse()
   })
 
-  const makeSut = () =>
-    componentTestSetup(NavigationTabsComponent, {
+  const makeSut = ({ items }: { items?: readonly NavigationItem[] } = {}) => {
+    const [fixture, component] = componentTestSetup(NavigationTabsComponent, {
       providers: [provideRouter(ROUTES)],
     })
+    fixture.componentRef.setInput('items', items ?? [])
+    fixture.detectChanges()
+    return [fixture, component] as const
+  }
 })
 
 function makeNavigationItemFromRoutePath(path: string): NavigationItem {
diff --git a/src/app/header/navigation-tabs/navigation-tabs.component.ts b/src/app/header/navigation-tabs/navigation-tabs.component.ts
index e96daa37..e8ed6a46 100644
--- a/src/app/header/navigation-tabs/navigation-tabs.component.ts
+++ b/src/app/header/navigation-tabs/navigation-tabs.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { TabComponent } from '../tab/tab.component'
 import { TabsComponent } from '../tabs/tabs.component'
 import { RouterLink, RouterLinkActive } from '@angular/router'
@@ -11,7 +11,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationTabsComponent {
-  @Input({ required: true }) items!: readonly NavigationItem[]
+  readonly items = input.required<readonly NavigationItem[]>()
   protected _selectedIndex?: number
 
   onActiveRouteChange(index: number) {
diff --git a/src/app/header/tab/tab.component.spec.ts b/src/app/header/tab/tab.component.spec.ts
index 4b0af32c..1bd6650e 100644
--- a/src/app/header/tab/tab.component.spec.ts
+++ b/src/app/header/tab/tab.component.spec.ts
@@ -29,7 +29,7 @@ describe('TabComponent', () => {
 
   describe('when selected', () => {
     beforeEach(() => {
-      component.selected = true
+      fixture.componentRef.setInput('selected', true)
       fixture.detectChanges()
     })
 
@@ -46,7 +46,7 @@ describe('TabComponent', () => {
 
   describe('when not selected', () => {
     beforeEach(() => {
-      component.selected = false
+      fixture.componentRef.setInput('selected', false)
       fixture.detectChanges()
     })
 
diff --git a/src/app/header/tabs/tabs.component.ts b/src/app/header/tabs/tabs.component.ts
index b3b2f03e..62d0c2f2 100644
--- a/src/app/header/tabs/tabs.component.ts
+++ b/src/app/header/tabs/tabs.component.ts
@@ -49,6 +49,8 @@ export class TabsComponent implements OnDestroy {
   private _currentTabs: readonly TabComponent[] = []
   private _indexToSelect?: number
   private _selectedIndex?: number
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ transform: numberAttribute }) set selectedIndex(index: number) {
     this._indexToSelect = index
   }
diff --git a/src/app/header/toolbar-button/toolbar-button.component.html b/src/app/header/toolbar-button/toolbar-button.component.html
index 8ea0d53a..e340aadb 100644
--- a/src/app/header/toolbar-button/toolbar-button.component.html
+++ b/src/app/header/toolbar-button/toolbar-button.component.html
@@ -1 +1 @@
-<span appMaterialSymbol>{{ icon }}</span>
+<span appMaterialSymbol>{{ icon() }}</span>
diff --git a/src/app/header/toolbar-button/toolbar-button.component.spec.ts b/src/app/header/toolbar-button/toolbar-button.component.spec.ts
index b9b7ac26..8c4a1697 100644
--- a/src/app/header/toolbar-button/toolbar-button.component.spec.ts
+++ b/src/app/header/toolbar-button/toolbar-button.component.spec.ts
@@ -24,6 +24,6 @@ describe('ToolbarButtonComponent', () => {
 const DUMMY_ICON = 'icon'
 const makeSut = () => {
   const [fixture, component] = componentTestSetup(ToolbarButtonComponent)
-  component.icon = DUMMY_ICON
+  fixture.componentRef.setInput('icon', DUMMY_ICON)
   return [fixture, component] as const
 }
diff --git a/src/app/header/toolbar-button/toolbar-button.component.ts b/src/app/header/toolbar-button/toolbar-button.component.ts
index 075f3f5f..906f95ec 100644
--- a/src/app/header/toolbar-button/toolbar-button.component.ts
+++ b/src/app/header/toolbar-button/toolbar-button.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
 
 @Component({
@@ -10,6 +10,7 @@ import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToolbarButtonComponent {
-  @Input({ required: true }) icon!: string
+  readonly icon = input.required<string>()
+  // https://github.com/angular/components/blob/18.0.5/src/material/button/button-base.ts#L257-L266
   // https://github.com/angular/components/blob/18.0.5/src/material/button/button-base.ts#L257-L266
 }
diff --git a/src/app/resume-page/attribute/attribute.component.html b/src/app/resume-page/attribute/attribute.component.html
index c1ab774c..7d85a3c4 100644
--- a/src/app/resume-page/attribute/attribute.component.html
+++ b/src/app/resume-page/attribute/attribute.component.html
@@ -1,4 +1,4 @@
 <span [attr.aria-describedby]="_id" tabindex="0" appMaterialSymbol>
-  {{ symbol }}
+  {{ symbol() }}
 </span>
 <div [attr.id]="_id" role="tooltip"><ng-content></ng-content></div>
diff --git a/src/app/resume-page/attribute/attribute.component.spec.ts b/src/app/resume-page/attribute/attribute.component.spec.ts
index a653a7fc..c5347b0f 100644
--- a/src/app/resume-page/attribute/attribute.component.spec.ts
+++ b/src/app/resume-page/attribute/attribute.component.spec.ts
@@ -10,7 +10,7 @@ describe('AttributeComponent', () => {
 
   function makeSut() {
     const [fixture, component] = componentTestSetup(AttributeComponent)
-    component.symbol = symbol
+    fixture.componentRef.setInput('symbol', symbol)
     fixture.detectChanges()
     return [fixture, component] as const
   }
diff --git a/src/app/resume-page/attribute/attribute.component.ts b/src/app/resume-page/attribute/attribute.component.ts
index 4e997264..13adb274 100644
--- a/src/app/resume-page/attribute/attribute.component.ts
+++ b/src/app/resume-page/attribute/attribute.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
 
 /**
@@ -16,7 +16,7 @@ let nextId = 0
   imports: [MaterialSymbolDirective],
 })
 export class AttributeComponent {
-  @Input({ required: true }) symbol!: string
+  readonly symbol = input.required<string>()
 
   protected _id = `${ATTRIBUTE_ID_PREFIX}${nextId++}`
 }
diff --git a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.html b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.html
index 9eb1a4b9..c67f510a 100644
--- a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.html
+++ b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.html
@@ -1 +1 @@
-<img [ngSrc]="src" width="64" height="64" [alt]="alt" />
+<img [ngSrc]="src()" width="64" height="64" [alt]="alt()" />
diff --git a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.spec.ts b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.spec.ts
index b6c5e67d..f7dc737e 100644
--- a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.spec.ts
+++ b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.spec.ts
@@ -13,9 +13,8 @@ describe('CardHeaderImageComponent', () => {
     TestBed.configureTestingModule({})
     fixture = TestBed.createComponent(CardHeaderImageComponent)
     component = fixture.componentInstance
-
-    component.src = src
-    component.alt = alt
+    fixture.componentRef.setInput('src', src)
+    fixture.componentRef.setInput('alt', alt)
     fixture.detectChanges()
   })
 
diff --git a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.ts b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.ts
index bf14c281..68f26635 100644
--- a/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.ts
+++ b/src/app/resume-page/card/card-header/card-header-image/card-header-image.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgOptimizedImage } from '@angular/common'
 
 @Component({
@@ -8,6 +8,6 @@ import { NgOptimizedImage } from '@angular/common'
   imports: [NgOptimizedImage],
 })
 export class CardHeaderImageComponent {
-  @Input({ required: true }) src!: string
-  @Input({ required: true }) alt!: string
+  readonly src = input.required<string>()
+  readonly alt = input.required<string>()
 }
diff --git a/src/app/resume-page/chip/chip.component.spec.ts b/src/app/resume-page/chip/chip.component.spec.ts
index c3468697..37dbe411 100644
--- a/src/app/resume-page/chip/chip.component.spec.ts
+++ b/src/app/resume-page/chip/chip.component.spec.ts
@@ -16,8 +16,8 @@ describe('ChipComponent', () => {
 
   describe('when selected attribute is false', () => {
     it('should not add the selected class', () => {
-      const [fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = false
+      const [fixture] = componentTestSetup(ChipComponent)
+      fixture.componentRef.setInput('selected', false)
       fixture.detectChanges()
 
       expect(fixture.debugElement.classes['selected']).toBeFalsy()
@@ -26,8 +26,8 @@ describe('ChipComponent', () => {
 
   describe('when selected attribute is true', () => {
     it('should add the selected class', () => {
-      const [fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = true
+      const [fixture] = componentTestSetup(ChipComponent)
+      fixture.componentRef.setInput('selected', true)
       fixture.detectChanges()
 
       expect(fixture.debugElement.classes['selected']).toBeTrue()
@@ -65,7 +65,7 @@ describe('ChipComponent', () => {
 
     beforeEach(() => {
       ;[fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = false
+      fixture.componentRef.setInput('selected', false)
       subscription = component.selectedChange
         .pipe(first())
         .subscribe((selected) => (newSelectedValue = selected))
diff --git a/src/app/resume-page/chip/chip.component.ts b/src/app/resume-page/chip/chip.component.ts
index d5edc04d..e440d9e9 100644
--- a/src/app/resume-page/chip/chip.component.ts
+++ b/src/app/resume-page/chip/chip.component.ts
@@ -3,7 +3,7 @@ import {
   EventEmitter,
   HostBinding,
   HostListener,
-  Input,
+  input,
   Output,
 } from '@angular/core'
 
@@ -12,11 +12,10 @@ import {
   template: '<ng-content></ng-content>',
   styleUrls: ['./chip.component.scss'],
   standalone: true,
+  host: { '[class.selected]': 'selected()' },
 })
 export class ChipComponent {
-  @HostBinding('class.selected')
-  @Input()
-  public selected?: boolean
+  public readonly selected = input<boolean>()
 
   @Output()
   public selectedChange = new EventEmitter<boolean>()
@@ -49,6 +48,6 @@ export class ChipComponent {
   }
 
   private emitToggledSelected() {
-    this.selectedChange.emit(!this.selected)
+    this.selectedChange.emit(!this.selected())
   }
 }
diff --git a/src/app/resume-page/chipped-content/chipped-content.component.spec.ts b/src/app/resume-page/chipped-content/chipped-content.component.spec.ts
index e3b4fd5d..c809f830 100644
--- a/src/app/resume-page/chipped-content/chipped-content.component.spec.ts
+++ b/src/app/resume-page/chipped-content/chipped-content.component.spec.ts
@@ -43,7 +43,7 @@ describe('ChippedContentComponent', () => {
     chipElements.forEach((chipElement, index) => {
       const content = CONTENTS[index]
 
-      expect(getComponentInstance(chipElement, ChipComponent).selected)
+      expect(getComponentInstance(chipElement, ChipComponent).selected())
         .withContext(`chip ${index} is unselected`)
         .toBeFalse()
 
@@ -102,7 +102,7 @@ describe('ChippedContentComponent', () => {
 
     it('should mark the chip as selected', () => {
       expect(
-        getComponentInstance(firstChipElement, ChipComponent).selected,
+        getComponentInstance(firstChipElement, ChipComponent).selected(),
       ).toBe(true)
     })
 
@@ -128,7 +128,7 @@ describe('ChippedContentComponent', () => {
 
       it('should mark the chip as unselected', () => {
         expect(
-          getComponentInstance(firstChipElement, ChipComponent).selected,
+          getComponentInstance(firstChipElement, ChipComponent).selected(),
         ).toBeFalse()
       })
 
@@ -154,11 +154,11 @@ describe('ChippedContentComponent', () => {
 
       it('should mark the previous chip as unselected and just tapped chip as selected', () => {
         expect(
-          getComponentInstance(firstChipElement, ChipComponent).selected,
+          getComponentInstance(firstChipElement, ChipComponent).selected(),
         ).toBeFalse()
 
         expect(
-          getComponentInstance(secondChipElement, ChipComponent).selected,
+          getComponentInstance(secondChipElement, ChipComponent).selected(),
         ).toBeTrue()
       })
 
diff --git a/src/app/resume-page/date-range/date-range.component.html b/src/app/resume-page/date-range/date-range.component.html
index 6f369426..9a4d02c0 100644
--- a/src/app/resume-page/date-range/date-range.component.html
+++ b/src/app/resume-page/date-range/date-range.component.html
@@ -1,8 +1,8 @@
-<span class="start">{{ range.start | date: 'MMM yyyy' }}</span>
+<span class="start">{{ range().start | date: 'MMM yyyy' }}</span>
 <span class="separator"> → </span>
 <span class="end">
-  @if (range.end) {
-    {{ range.end | date: 'MMM yyyy' }}
+  @if (range().end) {
+    {{ range().end | date: 'MMM yyyy' }}
   } @else {
     Present
   }
diff --git a/src/app/resume-page/date-range/date-range.component.spec.ts b/src/app/resume-page/date-range/date-range.component.spec.ts
index a102bb53..f7d09058 100644
--- a/src/app/resume-page/date-range/date-range.component.spec.ts
+++ b/src/app/resume-page/date-range/date-range.component.spec.ts
@@ -20,7 +20,7 @@ describe('DateRangeComponent', () => {
   })
 
   function setRangeAndDetectChanges(range: DateRange) {
-    component.range = range
+    fixture.componentRef.setInput('range', range)
     fixture.detectChanges()
   }
 
diff --git a/src/app/resume-page/date-range/date-range.component.ts b/src/app/resume-page/date-range/date-range.component.ts
index 3058ff3a..86f53ff8 100644
--- a/src/app/resume-page/date-range/date-range.component.ts
+++ b/src/app/resume-page/date-range/date-range.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { DateRange } from './date-range'
 import { DatePipe } from '@angular/common'
 
@@ -8,5 +8,5 @@ import { DatePipe } from '@angular/common'
   imports: [DatePipe],
 })
 export class DateRangeComponent {
-  @Input({ required: true }) public range!: DateRange
+  public readonly range = input.required<DateRange>()
 }
diff --git a/src/app/resume-page/education-section/education-item/education-item.component.ts b/src/app/resume-page/education-section/education-item/education-item.component.ts
index 584a1b2c..a19fbcc7 100644
--- a/src/app/resume-page/education-section/education-item/education-item.component.ts
+++ b/src/app/resume-page/education-section/education-item/education-item.component.ts
@@ -38,6 +38,8 @@ import { educationItemToContents } from './education-item-to-contents'
   ],
 })
 export class EducationItemComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set item(item: EducationItem) {
     this._item = item
     if (item.institution.name.length > 15 && item.institution.shortName) {
diff --git a/src/app/resume-page/experience-section/experience-item/experience-item.component.ts b/src/app/resume-page/experience-section/experience-item/experience-item.component.ts
index 68db74d4..b1c0dd3e 100644
--- a/src/app/resume-page/experience-section/experience-item/experience-item.component.ts
+++ b/src/app/resume-page/experience-section/experience-item/experience-item.component.ts
@@ -38,6 +38,8 @@ import { experienceItemToContents } from './experience-item-to-contents'
   ],
 })
 export class ExperienceItemComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set item(item: ExperienceItem) {
     this._item = item
     this._contents = experienceItemToContents(item)
diff --git a/src/app/resume-page/languages-section/language-item/language-item.component.html b/src/app/resume-page/languages-section/language-item/language-item.component.html
index 91c02fd6..00f24012 100644
--- a/src/app/resume-page/languages-section/language-item/language-item.component.html
+++ b/src/app/resume-page/languages-section/language-item/language-item.component.html
@@ -1,18 +1,18 @@
 <app-card>
   <app-card-header>
-    <app-language-tag [tag]="item.tag"></app-language-tag>
+    <app-language-tag [tag]="item().tag"></app-language-tag>
     <app-card-header-texts>
       <app-card-header-title appTestId="name">
-        {{ item.name }}
+        {{ item().name }}
       </app-card-header-title>
       <app-card-header-subtitle appTestId="fluency">
-        {{ item.fluency }}
+        {{ item().fluency }}
       </app-card-header-subtitle>
     </app-card-header-texts>
   </app-card-header>
-  @if (item.comment) {
+  @if (item().comment) {
     <div appTestId="comment">
-      <p>{{ item.comment }}</p>
+      <p>{{ item().comment }}</p>
     </div>
   }
 </app-card>
diff --git a/src/app/resume-page/languages-section/language-item/language-item.component.spec.ts b/src/app/resume-page/languages-section/language-item/language-item.component.spec.ts
index 07c3c5a6..f35e4cf5 100644
--- a/src/app/resume-page/languages-section/language-item/language-item.component.spec.ts
+++ b/src/app/resume-page/languages-section/language-item/language-item.component.spec.ts
@@ -114,6 +114,6 @@ function setLanguageItem(
   fixture: ComponentFixture<LanguageItemComponent>,
   overrides?: Partial<LanguageItem>,
 ) {
-  fixture.componentInstance.item = makeLanguageItem(overrides)
+  fixture.componentRef.setInput('item', makeLanguageItem(overrides))
   fixture.detectChanges()
 }
diff --git a/src/app/resume-page/languages-section/language-item/language-item.component.ts b/src/app/resume-page/languages-section/language-item/language-item.component.ts
index 52815997..cfb02830 100644
--- a/src/app/resume-page/languages-section/language-item/language-item.component.ts
+++ b/src/app/resume-page/languages-section/language-item/language-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { LanguageItem } from './language-item'
 import { CardComponent } from '../../card/card.component'
 import { CardHeaderComponent } from '../../card/card-header/card-header.component'
@@ -22,5 +22,5 @@ import { LanguageTagComponent } from './language-tag/language-tag.component'
   templateUrl: './language-item.component.html',
 })
 export class LanguageItemComponent {
-  @Input({ required: true }) item!: LanguageItem
+  readonly item = input.required<LanguageItem>()
 }
diff --git a/src/app/resume-page/languages-section/language-item/language-tag/language-tag.component.ts b/src/app/resume-page/languages-section/language-item/language-tag/language-tag.component.ts
index 3df99fa8..8d83c032 100644
--- a/src/app/resume-page/languages-section/language-item/language-tag/language-tag.component.ts
+++ b/src/app/resume-page/languages-section/language-item/language-tag/language-tag.component.ts
@@ -7,6 +7,8 @@ import { Component, Input } from '@angular/core'
   styleUrl: './language-tag.component.scss',
 })
 export class LanguageTagComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set tag(tag: string) {
     this._tag = tag
     this._url = getUrlForIso6391Tag(tag)
diff --git a/src/app/resume-page/link/link.component.html b/src/app/resume-page/link/link.component.html
index ccaf67cf..a4653c99 100644
--- a/src/app/resume-page/link/link.component.html
+++ b/src/app/resume-page/link/link.component.html
@@ -1,5 +1,5 @@
-@if (href) {
-  <a [href]="href">
+@if (href()) {
+  <a [href]="href()">
     <ng-template [ngTemplateOutlet]="content"></ng-template>
   </a>
 } @else {
diff --git a/src/app/resume-page/link/link.component.spec.ts b/src/app/resume-page/link/link.component.spec.ts
index 3661e318..0ab33a88 100644
--- a/src/app/resume-page/link/link.component.spec.ts
+++ b/src/app/resume-page/link/link.component.spec.ts
@@ -7,6 +7,7 @@ import { textContent } from '@/test/helpers/text-content'
 describe('LinkComponent', () => {
   it('should create', () => {
     const [fixture, component] = componentTestSetup(LinkComponent)
+    fixture.componentRef.setInput('href', undefined)
     fixture.detectChanges()
 
     expect(component).toBeTruthy()
@@ -39,8 +40,8 @@ describe('LinkComponent', () => {
     const href = 'https://example.org'
 
     it('should contain the anchor element with given href attribute', () => {
-      const [fixture, component] = componentTestSetup(LinkComponent)
-      component.href = href
+      const [fixture] = componentTestSetup(LinkComponent)
+      fixture.componentRef.setInput('href', href)
       fixture.detectChanges()
 
       const anchorElement = fixture.debugElement.query(By.css('a'))
diff --git a/src/app/resume-page/link/link.component.ts b/src/app/resume-page/link/link.component.ts
index dbb66e66..07bc383e 100644
--- a/src/app/resume-page/link/link.component.ts
+++ b/src/app/resume-page/link/link.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgTemplateOutlet } from '@angular/common'
 
 @Component({
@@ -7,5 +7,5 @@ import { NgTemplateOutlet } from '@angular/common'
   imports: [NgTemplateOutlet],
 })
 export class LinkComponent {
-  @Input({ required: true }) public href?: string
+  public readonly href = input.required<string | undefined>()
 }
diff --git a/src/app/resume-page/projects-section/project-item/project-item.component.ts b/src/app/resume-page/projects-section/project-item/project-item.component.ts
index 2c075d6d..d1bc647c 100644
--- a/src/app/resume-page/projects-section/project-item/project-item.component.ts
+++ b/src/app/resume-page/projects-section/project-item/project-item.component.ts
@@ -38,6 +38,8 @@ import { projectItemToContents } from './project-item-to-contents'
   ],
 })
 export class ProjectItemComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set item(item: ProjectItem) {
     this._item = item
     this._contents = projectItemToContents(item)
diff --git a/src/app/resume-page/technology/technology.component.ts b/src/app/resume-page/technology/technology.component.ts
index fa9fbe73..2d4db2a2 100644
--- a/src/app/resume-page/technology/technology.component.ts
+++ b/src/app/resume-page/technology/technology.component.ts
@@ -18,6 +18,8 @@ import {
   styleUrl: './technology.component.scss',
 })
 export class TechnologyComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) set item(item: TechnologyItem) {
     this._displayName = this.getTechnologyDisplayNameFromSlug(item.slug)
     this._icon = this.getTechnologyIconFromSlug(item.slug)