Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@angular/fire
Advanced tools
@angular/fire is the official Angular library for Firebase. It provides a set of AngularFire modules that enable Angular applications to interact with Firebase services such as Firestore, Authentication, Storage, and more. This library simplifies the integration of Firebase with Angular applications, offering reactive and declarative APIs.
Firestore
This feature allows you to interact with Firestore, a NoSQL database provided by Firebase. The code sample demonstrates how to retrieve a collection of items from Firestore and subscribe to changes in real-time.
import { AngularFirestore } from '@angular/fire/compat/firestore';
constructor(private firestore: AngularFirestore) {}
getItems() {
return this.firestore.collection('items').valueChanges();
}
Authentication
This feature enables authentication functionalities such as signing in, signing out, and managing user sessions. The code sample shows how to sign in a user using email and password.
import { AngularFireAuth } from '@angular/fire/compat/auth';
constructor(private afAuth: AngularFireAuth) {}
login(email: string, password: string) {
return this.afAuth.signInWithEmailAndPassword(email, password);
}
Storage
This feature allows you to interact with Firebase Storage, which is used for storing and serving user-generated content such as images and videos. The code sample demonstrates how to upload a file to Firebase Storage.
import { AngularFireStorage } from '@angular/fire/compat/storage';
constructor(private storage: AngularFireStorage) {}
uploadFile(filePath: string, file: File) {
const fileRef = this.storage.ref(filePath);
return fileRef.put(file);
}
Realtime Database
This feature provides access to Firebase Realtime Database, a cloud-hosted NoSQL database that allows data to be stored and synchronized in real-time. The code sample shows how to retrieve a list of items from the Realtime Database.
import { AngularFireDatabase } from '@angular/fire/compat/database';
constructor(private db: AngularFireDatabase) {}
getItems() {
return this.db.list('items').valueChanges();
}
Analytics
This feature enables the use of Firebase Analytics to log events and track user interactions within your application. The code sample demonstrates how to log a custom event.
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
constructor(private analytics: AngularFireAnalytics) {}
logEvent(eventName: string, eventParams: any) {
this.analytics.logEvent(eventName, eventParams);
}
The 'firebase' package is the official Firebase JavaScript SDK. It provides comprehensive access to Firebase services but lacks the Angular-specific integrations and reactive APIs provided by @angular/fire. Developers using Angular would need to manually integrate Firebase services and manage state updates.
The 'reactfire' package is the official Firebase library for React. It offers similar functionalities to @angular/fire but is tailored for React applications. It provides hooks and components to easily integrate Firebase services with React's component-based architecture.
The 'vuefire' package is the official Firebase library for Vue.js. It provides bindings to integrate Firebase services with Vue.js applications, similar to how @angular/fire integrates with Angular. It offers Vue-specific features such as directives and plugins.
The official library for Firebase and Angular
Stackblitz Template - Remember to set your Firebase configuration in app/app.module.ts
.
Upgrading to v5.0? Check out our guide.
Having troubles? Get help on the Firebase Mailing List (officially supported), the Firebase Community Slack (look for the #angularfire2
room), Gitter, or Stack Overflow.
npm install firebase @angular/fire --save
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items | async">
{{ item.name }}
</li>
</ul>
`
})
export class MyApp {
items: Observable<any[]>;
constructor(db: AngularFirestore) {
this.items = db.collection('items').valueChanges();
}
}
Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. Learn about the differences between them in the Firebase Documentation.
AngularFirestore
allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
AngularFireDatabase
allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network (CDN) with a single command.
Angular Universal is a technology that allows you to run your Angular application on a server. This allows you to generate your HTML in a process called server-side rendering (SSR). Angularfire is compatible with server-side rendering; allowing you to take advantage of the Search Engine Optimization, link previews, the performance gains granted by the technology, and more. Learn more about Angular Universal.
FAQs
Angular + Firebase = ❤️
The npm package @angular/fire receives a total of 110,957 weekly downloads. As such, @angular/fire popularity was classified as popular.
We found that @angular/fire demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.