added

package.json

     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "firebase": "^12.14.0",
     "rxjs": "~7.8.0",
     "svg-pan-zoom": "^3.6.2",
     "tslib": "^2.3.0"

src/app/firebase.ts

+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBdkDfrr2jA33olJSd2Fm5KeneOwpded-o",
+  authDomain: "dankamanagement-39a6a.firebaseapp.com",
+  projectId: "dankamanagement-39a6a",
+  storageBucket: "dankamanagement-39a6a.firebasestorage.app",
+  messagingSenderId: "85260511199",
+  appId: "1:85260511199:web:27b2c43a0fdb77ad32066a",
+  measurementId: "G-Z3PPJZDQ16"
+};
+
+export const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);

src/app/pages/danka-detail/danka-detail.ts

   ViewChild,
   AfterViewInit
 } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { FamilyUnitLayoutService } from '../../services/family-unit-layout';
 
 
+
 interface NextMemorial {
   name: string;
   memorialType: string;
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })
-export class DankaDetail implements AfterViewInit {
+export class DankaDetail implements OnInit, AfterViewInit {
   danka: Danka | undefined;
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
     private familyUnitLayout: FamilyUnitLayoutService,
     private eventService: EventService,
   ) {
+
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
       this.selectedTab = 'family';
       this.selectedTab = 'familyTree';
     }
 
+  }
+  ngOnInit(): void {
+    this.init();
+  }
+  async init(): Promise<void> {
     const id = this.route.snapshot.params['id'];
-    if (id) {
-      this.danka = this.dankaService.getDankaById(id);
-      this.marriageRelations = this.marriageRelationService.getMarriageRelationsByDankaId(id);
-      this.families = this.sortFamiliesByHouseholder(this.familyService.getFamiliesByDankaId(id));
-      this.selectedFamily = this.families[0];
-      this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
-      this.nextMemorial = this.getNextMemorial();
-
-      this.treeNodes =
-        this.familyTreeBuilder.build(
-          this.families,
-          this.marriageRelations
-        );
+    if (!id) return;
 
-      const units =
-        this.familyTreeBuilder.buildFamilyUnits(
-          this.treeNodes
-        );
+    this.danka = (await this.dankaService.getDankaById(id)) ?? undefined;
+    if (!this.danka) return;
 
-      const unitTree =
-        this.familyTreeBuilder.buildFamilyUnitTree(
-          units
-        );
+    this.marriageRelations = await this.marriageRelationService.getMarriageRelationsByDankaId(id);
+    this.families = this.sortFamiliesByHouseholder(
+      await this.familyService.getFamiliesByDankaId(id)
+    );
 
-      const unitRoots =
-        this.familyTreeBuilder.getUnitRoots(
-          unitTree
-        );
+    this.selectedFamily = this.families[0];
+    this.kakocholist = await this.kakochoService.getKakochoByDankaId(id);
 
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
+    this.nextMemorial = this.getNextMemorial();
 
-      const roots =
-        this.familyTreeBuilder.getRoots(
-          this.treeNodes
-        );
+    this.treeNodes =
+      this.familyTreeBuilder.build(
+        this.families,
+        this.marriageRelations
+      );
 
-      this.layoutNodes =
-        this.familyTreeLayout.buildLayout(
-          roots
-        );
+    const units =
+      this.familyTreeBuilder.buildFamilyUnits(
+        this.treeNodes
+      );
 
-      this.rebuildLayoutNodeMap();
+    const unitTree =
+      this.familyTreeBuilder.buildFamilyUnitTree(
+        units
+      );
 
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
+    const unitRoots =
+      this.familyTreeBuilder.getUnitRoots(
+        unitTree
+      );
 
-      this.rebuildUnitLayoutMap();
+    this.unitLayouts =
+      this.familyUnitLayout.buildLayout(
+        unitRoots
+      );
 
-      this.calculateViewBox();
+    const roots =
+      this.familyTreeBuilder.getRoots(
+        this.treeNodes
+      );
 
-      this.kakocholist.forEach(kakocho => {
-        if (kakocho.familyId) {
-          this.deathDateMap.set(
-            kakocho.familyId,
-            kakocho
-          );
-        }
-      });
+    this.layoutNodes =
+      this.familyTreeLayout.buildLayout(
+        roots
+      );
 
-      this.kakocholist.forEach(k => {
-        const key = this.normalizeName(k.name) + '_' + k.dankaId;
-        this.kakochoByNameMap.set(key, k);
-      });
+    this.rebuildLayoutNodeMap();
+
+    this.unitLayouts =
+      this.familyUnitLayout.buildLayout(
+        unitRoots
+      );
+
+    this.rebuildUnitLayoutMap();
+
+    this.calculateViewBox();
+
+    this.kakocholist.forEach(kakocho => {
+      if (kakocho.familyId) {
+        this.deathDateMap.set(
+          kakocho.familyId,
+          kakocho
+        );
+      }
+    });
+
+    this.kakocholist.forEach(k => {
+      const key = this.normalizeName(k.name) + '_' + k.dankaId;
+      this.kakochoByNameMap.set(key, k);
+    });
 
-    }
   }
 
   ngAfterViewInit(): void {

src/app/services/dankaService.ts

 import { Injectable } from '@angular/core';
+import {
+  collection,
+  getDocs,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  updateDoc
+} from 'firebase/firestore';
+
+import { db } from '../firebase';
 import { Danka } from '../models/danka';
 
 @Injectable({
   providedIn: 'root',
 })
 export class DankaService {
-  private dankaList: Danka[] = [
-    {
-      id: '1',
-      householdName: '鈴木家',
-      householdFurigana: 'すずきけ',
-      householder: '鈴木 太郎',
-      householderFurigana: 'すずき たろう',
-      postalCode: '123-4567',
-      address: '市内 1-2-3',
-      note: '寺報送付あり。年忌法要の案内は施主へ連絡。',
-      updatedAt: '2026-05-28',
-      phones: [
-        {
-          tel: '03-4567-8910',
-          note: '寺報連絡',
-        },
-        {
-          tel: '090-1234-5678',
-          note: '施主',
-        },
-      ],
-    },
-    {
-      id: '2',
-      householdName: '古田家',
-      householdFurigana: 'ふるたけ',
-      householder: '古田 太郎',
-      householderFurigana: 'ふるた たろう',
-      postalCode: '234-4567',
-      address: '市内 1-2-3',
-      note: '電話連絡を優先。',
-      updatedAt: '2026-05-28',
-      phones: [
-        {
-          tel: '0-5678-9101',
-          note: '寺報連絡',
-        },
-        {
-          tel: '080-7890-4567',
-          note: '施主',
-        },
-      ],
-    }
-  ];
+  private path = 'danka';
+
+  // 一覧
+  async getDankaList(): Promise<Danka[]> {
+    const snap = await getDocs(collection(db, this.path));
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Danka, 'id'>)
+    }));
+  }
+
+  // 1件
+  async getDankaById(id: string): Promise<Danka | undefined> {
+    const ref = doc(db, this.path, id);
+    const snap = await getDoc(ref);
+
+    if (!snap.exists()) return undefined;
 
-  //サービスの檀家一覧の取得
-  getDankaList(): Danka[] {
-    return this.dankaList;
+    return {
+      id: snap.id,
+      ...(snap.data() as Omit<Danka, 'id'>)
+    };
   }
 
-  //対象の檀家IDを取得
-  getDankaById(id: string): Danka | undefined {
-    return this.dankaList.find((danka) => danka.id === id);
+  // 作成・更新
+  async saveDanka(danka: Danka): Promise<void> {
+    const ref = doc(db, this.path, danka.id);
+    await setDoc(ref, danka);
   }
 
-  //DBへの檀家情報の登録
-  saveDanka(updatedDanka: Danka): void {
-    const index = this.dankaList.findIndex((danka) => danka.id === updatedDanka.id);
-    if (index === -1) {
-      this.dankaList.push(updatedDanka);
-      return;
-    }
-    this.dankaList[index] = updatedDanka;
+  // 部分更新
+  async updateDanka(id: string, data: Partial<Danka>): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await updateDoc(ref, data as any);
   }
 
-  //DBの檀家情報の削除
-  deleteDanka(id: string): void {
-    const index = this.dankaList.findIndex((danka) => danka.id === id);
-    if (index === -1) {
-      return;
-    }
-    this.dankaList.splice(index, 1);
+  // 削除
+  async deleteDanka(id: string): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await deleteDoc(ref);
   }
-}
+}