Creating a Basic Angular App with Firebase Database

In this tutorial, we will walk you through the process of creating a simple Angular application integrated with Firebase Realtime Database. Firebase provides a powerful backend-as-a-service (BaaS) platform that allows you to build real-time applications without the need for server-side coding. By the end of this tutorial, you'll have a functional Angular app that can interact with a Firebase database.

Prerequisites

Before you begin, ensure you have the following:

1. Node.js and npm installed on your machine.
2. Angular CLI installed globally.

Steps

Step 1: Set Up Your Angular Project

Open your terminal and run the following commands:

ng new firebase-angular-app cd firebase-angular-app

Step 2: Create a Firebase Project and Set Up Firebase

1. Go to the Firebase Console, sign in or create an account, and click "Add Project."
2. Follow the instructions to set up your Firebase project.
3. After creating the project, click on "Develop" in the left menu and choose "Database."
4. Create a new "Realtime Database" by clicking on "Create Database."

Step 3: Configure Firebase in Your Angular App

1. In your Firebase project, go to "Project settings" (gear icon) > "General" > "Your apps."
2. Click on "Config" to get your Firebase configuration object.

In your Angular app:

1. Open the src/environments/environment.ts file.
2. Replace the firebaseConfig object with the one you obtained from Firebase:

export const environment = { 
production: false, 
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" 
} 
};

Step 4: Install Firebase Dependencies

In your terminal, run:

npm install firebase @angular/fire

Step 5: Set Up Firebase in Your Angular App

1. Open your src/app/app.module.ts file.
2. Import the necessary modules and configure AngularFire using the provided firebaseConfig:

import { AngularFireModule } from '@angular/fire'; 
import { AngularFirestoreModule } from '@angular/fire/firestore'; 
@NgModule(
{ 
declarations: [/* ... */], 
imports: [ BrowserModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFirestoreModule ], 
bootstrap: [AppComponent] 
}) 
export class AppModule { }

Step 6: Create a Component for Data Display

Run the following command to generate a new component:

ng generate component data-list

Step 7: Fetch and Display Data from Firebase

In your src/app/data-list/data-list.component.ts file:

import { Component, OnInit } from '@angular/core'; 
import { AngularFirestore } from '@angular/fire/firestore'; 
@Component({ 
selector: 'app-data-list', 
templateUrl: './data-list.component.html', 
styleUrls: ['./data-list.component.css']
}) 
export class DataListComponent implements OnInit { 
dataList: any[]; 
constructor(private firestore: AngularFirestore) { } 
ngOnInit(): void { 
this.firestore.collection('data').valueChanges().subscribe(data => { this.dataList = data; }); 
}
}

In your src/app/data-list/data-list.component.html file:

<ul> <li *ngFor="let item of dataList">{{ item.name }} - {{ item.value }}</li> </ul>

Step 8: Deploy Your Angular App

You can deploy your Angular app using platforms like Firebase Hosting. Run the following commands:

ng build --prod npm install -g firebase-tools firebase login firebase init firebase deploy

Your Angular app integrated with Firebase Realtime Database is now up and running!

Conclusion

Congratulations! You've successfully created a basic Angular app that interacts with a Firebase Realtime Database. This tutorial provides a foundation for building more complex applications using Angular and Firebase. Feel free to explore more Firebase features to enhance your app's functionality and user experience.