[update]

再描画処理

src/app/pages/event/event.html

             <div>状態</div>
           </div>
 
-          @if (filteredEventTargets.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredEventTargets.length > 0) {
             @for (target of filteredEventTargets; track target.id) {
               <div class="event-table-row">
                 <div>

src/app/pages/event/event.ts

-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 })
 export class EventPage implements OnInit{
   eventTargets: EventTarget[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedEventType: EventType | 'all' = 'all';
   selectedStatus: EventStatus | 'all' = 'all';
     { label: '未案内', value: '未案内' },
     { label: '案内済', value: '案内済' },
   ];
+  private eventRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private eventService: EventService,
+    private cdr: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
   }
 
   async createEventTargetList(): Promise<void> {
-    this.eventTargets = [];
+    const requestId = ++this.eventRequestId;
+    const targetYear = this.targetYear;
+    const selectedEventType = this.selectedEventType;
+    const eventTargets: EventTarget[] = [];
+
+    if (this.eventTargets.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
 
     const families = await this.familyService.getFamilyList();
 
       const birthDate = this.parseDate(family.birthDate);
       if (!birthDate) continue;
 
-      const age = this.targetYear - birthDate.getFullYear();
+      const age = targetYear - birthDate.getFullYear();
       const eventTypes = this.getEventTypes(age);
       if (eventTypes.length === 0) continue;
 
 
       for (const eventType of eventTypes) {
         if (
-          this.selectedEventType !== 'all' &&
-          this.selectedEventType !== eventType
+          selectedEventType !== 'all' &&
+          selectedEventType !== eventType
         ) {
           continue;
         }
         const defaultStatus: EventStatus =
           Number(family.id) % 2 === 0 ? '案内済' : '未案内';
 
-        this.eventTargets.push({
+        eventTargets.push({
           id,
           dankaId: family.dankaId,
           name: family.name,
           furigana: family.furigana,
           householdName: danka?.householdName ?? '不明',
           relationship: family.relationship || '未登録',
-          birthDate: family.birthDate,
+          birthDate: this.formatDateForValue(birthDate),
           age,
           eventType,
           note: family.note,
       }
     }
 
-    this.eventTargets.sort(
+    if (requestId !== this.eventRequestId) {
+      return;
+    }
+
+    this.eventTargets = eventTargets.sort(
       (a, b) =>
         this.getEventSortOrder(a.eventType) -
         this.getEventSortOrder(b.eventType) ||
         a.age - b.age ||
         a.name.localeCompare(b.name, 'ja'),
     );
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeEventType(eventType: EventType | 'all'): void {
           target.eventType,
           target.note,
           target.status,
-        ].some((value) => value.includes(keyword));
+        ].some((value) => this.includesKeyword(value, keyword));
 
       return matchesStatus && matchesKeyword;
     });
     return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
   }
 
-  private parseDate(value: string): Date | null {
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
     const [year, month, day] = value.split('-').map(Number);
     if (!year || !month || !day) {
       return null;
     }
     return new Date(year, month - 1, day);
   }
+
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
+  private formatDateForValue(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
 }

src/app/pages/memorial-list/memorial-list.html

             <div>詳細</div>
           </div>
 
-          @if (filteredMemorialList.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredMemorialList.length > 0) {
             @for (memorial of filteredMemorialList; track memorial.id) {
               <div class="memorial-table-row">
                 <div class="person-name">

src/app/pages/memorial-list/memorial-list.ts

-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Memorial } from '../../models/memorial';
 import { DankaService } from '../../services/dankaService';
 })
 export class MemorialList implements OnInit{
   memorialList: Memorial[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedMemorialType = 'all';
   searchKeyword = '';
+  private memorialRequestId = 0;
   yearOptions: number[] = [
     this.targetYear - 1,
     this.targetYear,
   constructor(
     private dankaService: DankaService,
     private kakochoService: KakochoService,
+    private cdr: ChangeDetectorRef,
   ) {
 
   }
   }
 
   async createMemorialList(): Promise<void> {
-    this.memorialList = [];
+    const requestId = ++this.memorialRequestId;
+    const targetYear = this.targetYear;
+    const selectedMemorialType = this.selectedMemorialType;
+    const memorialList: Memorial[] = [];
+
+    if (this.memorialList.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
 
     const kakochoList = await this.kakochoService.getKakochoList();
 
     for (const kakocho of kakochoList) {
-      const deathYear = Number(kakocho.deathDate.slice(0, 4));
-      const yearDiff = this.targetYear - deathYear;
+      const deathDate = this.parseDate(kakocho.deathDate);
+      if (!deathDate) continue;
+
+      const deathYear = deathDate.getFullYear();
+      const yearDiff = targetYear - deathYear;
 
       const memorialType = this.getMemorialType(yearDiff);
       if (memorialType === '') continue;
 
       if (
-        this.selectedMemorialType !== 'all' &&
-        this.selectedMemorialType !== memorialType
+        selectedMemorialType !== 'all' &&
+        selectedMemorialType !== memorialType
       ) {
         continue;
       }
         kaimyo: kakocho.kaimyo,
         relationship: kakocho.relationship,
         householdName: danka?.householdName ?? '不明',
-        deathDate: kakocho.deathDate,
+        deathDate: this.formatDateForValue(deathDate),
         memorialType,
         note: kakocho.note,
       };
 
-      this.memorialList.push(memorialTarget);
+      memorialList.push(memorialTarget);
     }
 
-    this.memorialList.sort((a, b) => {
+    if (requestId !== this.memorialRequestId) {
+      return;
+    }
+
+    this.memorialList = memorialList.sort((a, b) => {
       const deathDateA = new Date(a.deathDate).getTime();
       const deathDateB = new Date(b.deathDate).getTime();
 
 
       return a.name.localeCompare(b.name, 'ja');
     });
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeMemorialType(memorialType: string): void {
         memorial.householdName,
         memorial.memorialType,
         memorial.note,
-      ].some((value) => value.includes(keyword)),
+      ].some((value) => this.includesKeyword(value, keyword)),
     );
   }
 
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
   formatDeathDate(deathDate: string): string {
-    const [, month, day] = deathDate.split('-').map(Number);
-    if (!month || !day) {
+    const date = this.parseDate(deathDate);
+    if (!date) {
       return '未登録';
     }
 
-    return `${month}月${day}日`;
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
   }
 
   getMemorialType(yearDiff: number) {
         return '';
     }
   }
+
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+
+    return new Date(year, month - 1, day);
+  }
+
+  private formatDateForValue(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
 }

src/app/pages/search/search.ts

-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Danka } from '../../models/danka';
     private familyService: FamilyService,
     private kakochoService: KakochoService,
     private route: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
     this.familyResults = [];
     this.kakochoResults = [];
     this.totalResultCount = 0;
+    this.cdr.detectChanges();
   }
 
   private includesKeyword(value: unknown, keyword: string): boolean {
       dankaResults.length +
       familyResults.length +
       kakochoResults.length;
+    this.cdr.detectChanges();
   }
 }