Anglar 애플리케이션과 Firebase를 함께 사용하여 Cloud Firestore 사용

작업 환경

Firebase 측면 설정

% firebase --version
10.4.0

% firebase login 
Already logged in as [email protected]

어플리케이션 설정

ng add @angular/fire

"allowedCommonJsDependencies": [
	"firebase",
	"@firebase/database"
]

npm i @types/angularfire --save-dev

export const environment = {
	production: false,
	apiKey: ...
  authDomain: ...
  databaseUrRL: ... 

import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

imports: [
	（略）
  AngularFireModule.initializeApp(environment.firebase),
],

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),

데이터베이스 초기 설정

Anglar에서 Firebase 데이터를 조작해 보세요.

목록 보기 구현

import {
  AngularFirestore,
  AngularFirestoreCollection,
} from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { Applicant } from './class/applicant';

export class ApplicantService {
	private applicantsCollection: AngularFirestoreCollection<Applicant>;
  applicants$: Observable<Applicant[]>;

  constructor(private afs: AngularFirestore) {
    this.applicantsCollection = afs.collection<Applicant>('applicants');
    this.applicants$ = this.applicantsCollection.snapshotChanges().pipe(
      map((actions) =>
        actions.map((a) => {
          const data = a.payload.doc.data() as Applicant;
          const id = a.payload.doc.id;
          return { id, ...data };
        })
      )
    );
  }

export class ListComponent implements OnInit {
  applicants$: Observable<Applicant[]>;

  constructor(private applicantService: ApplicantService) {
    this.applicants$ = this.applicantService.applicants$;
  }

<ul *ngFor="let applicant of applicants$ | async">
  <li>{{ applicant.name }}</li>
</ul>

등록 처리의 실현

<div class="mb-3">
  <label class="form-label">名前</label>
  <input type="text" [(ngModel)]="applicant.name" class="form-control" />
</div>

<button
  (click)="addApplicant(applicant); applicant.name = ''"
  type="button"
  class="btn btn-outline-info"
>
  送信
</button>

import { Router } from '@angular/router';
import { Applicant } from '../applicant';
import { ApplicantService } from '../applicant.service';

constructor(
    private applicantService: ApplicantService,
    private router: Router
  ) {}

  ngOnInit(): void {}

  addApplicant(applicant: Applicant): void {
    this.applicantService
      .addApplicant(applicant)
      .then(() => this.router.navigateByUrl('/list'));
  }

import {
  AngularFirestore,
  AngularFirestoreCollection,
} from '@angular/fire/compat/firestore';
import { Applicant } from './class/applicant';

export class ApplicantService {
	private applicantsCollection: AngularFirestoreCollection<Applicant>;
	（略）

	addApplicant(applicant: Applicant) {
    return this.applicantsCollection.add(applicant);
  }

고급 디스플레이의 실현

<ul *ngFor="let applicant of applicants$ | async">
  <li>
    <a routerLink="/detail/{{ applicant.id }}">
      {{ applicant.name }}
    </a>
  </li>
</ul>

const routes: Routes = [
  { path: '', component: FormComponent },
  { path: 'list', component: ListComponent },
  { path: 'detail/:id', component: DetailComponent },  👈　追記
];

import { Observable } from 'rxjs';
import {
  AngularFirestore,
  AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { Applicant } from '../class/applicant';

export class DetailComponent implements OnInit {
  private id: string;
  private applicantDoc: AngularFirestoreDocument<Applicant>;
  applicant$: Observable<Applicant>;

  constructor(
    private route: ActivatedRoute,
    private afs: AngularFirestore,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.id = `${this.route.snapshot.paramMap.get('id')}`;
    this.applicantDoc = this.afs.doc<Applicant>(`applicants/${this.id}`);
    this.applicant$ = this.applicantDoc.valueChanges();
  }

<ng-container *ngIf="applicant$ | async as applicant">
  <div class="mb-3">
    <label class="form-label">名前</label>
    <input type="text" [(ngModel)]="applicant.name" class="form-control" />
  </div>

업데이트 처리의 실현

updateApplicant(applicant: Applicant): void {
  this.applicantDoc.update(applicant);
}

<button routerLink="/list" class="btn btn-outline-secondary">戻る</button>
<button
  (click)="updateApplicant(applicant)"
  type="button"
  class="btn btn-outline-info"
>
  更新
</button>

삭제 처리의 실현

deleteApplicant(): void {
  if (window.confirm('削除しますか？')) {
    this.applicantDoc.delete().then(() => this.router.navigateByUrl('/list'));
  }
}

<button (click)="deleteApplicant()" class="btn btn-outline-warning ms-auto">
  削除
</button>

총결산

참고 자료