This tutorial will guide you through the process of integrating Firebase with Angular applications. Firebase is a powerful platform that provides a variety of services like authentication, databases, and hosting, which can be easily integrated into your Angular projects.
Prerequisites
- Angular CLI installed
- Node.js and npm installed
- Firebase account and Firebase project setup
Step-by-Step Guide
1. Initialize Firebase in Angular
First, you need to install the Firebase Angular SDK by running the following command in your Angular project directory:
npm install firebase-angular
Next, you will need to initialize Firebase in your Angular application. Create a new file named firebase.config.ts
in the src/app
directory and add the following code:
import { FirebaseApp, initializeApp } from 'firebase/app';
import { getFirestore, Firestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
appId: 'YOUR_APP_ID'
};
const app = initializeApp(firebaseConfig);
const db: Firestore = getFirestore(app);
export { db };
Replace YOUR_API_KEY
, YOUR_AUTH_DOMAIN
, YOUR_PROJECT_ID
, YOUR_STORAGE_BUCKET
, YOUR_MESSAGING_SENDER_ID
, and YOUR_APP_ID
with your Firebase project's credentials.
2. Add Firebase Services to Your Angular Application
To use Firebase services like Firestore, you need to import them in your Angular module. Open the app.module.ts
file and add the following imports:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3. Use Firestore in Your Angular Components
Now, you can use Firestore in your Angular components. First, import AngularFirestore
and AngularFireFirestore
in your component file:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
Next, inject AngularFirestore
into your component's constructor:
constructor(private afs: AngularFirestore) { }
Now, you can use Firestore services like collection
to read and write data:
this.afs.collection('your-collection').valueChanges().subscribe(data => {
console.log(data);
});
For more advanced usage, you can also use Firestore's query capabilities:
this.afs.collection('your-collection', ref => ref.where('field', '==', 'value')).valueChanges().subscribe(data => {
console.log(data);
});
Next Steps
To learn more about integrating Firebase with Angular, you can read our detailed guide on Angular Firebase Integration.