Angular Firebase Demo App

Mini angularfire2 API showcase of angularfire2/auth, angularfire2/database, angularfire2/firestore and angularfire2/storage, tutorials, snippet compilations and demo app.

Getting started

Download firebase and angularfire2 packages npm i firebase angularfire2 --save Import these in your app.module.ts and setup environments folder. see how to setup environments folder in Usage header below.

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireStorageModule } from 'angularfire2/storage';

@NgModule({
  ...
  imports: [
    ...
    AngularFireModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule,

  ],

})

Authentication

Snippets / Demo / firebase docs / angularfire2 docs

For angularfire2/auth mini API showcase and snippet collection, go here.

• Sign up / Sign in with Email and Password
• Sign in Anonymously
• Sign out
• Authenticate using Social Media accounts
• Update Email
• Update Password
• Update Profile

APIs used

	API
Sign up (Email and password)	createUserWithEmailAndPassword()
Sign in (Email and password)	signInWithEmailAndPassword()
Sign out	signOut()
Social Media	signInWithPopup()
Update email address	updateEmail()
Update password	updatePassword()
Update profile	updateProfile()

Realtime Database

Snippets / Demo / firebase docs / angularfire2 docs

CRUD Operations in both List & Object

For angularfire2/database mini API showcase and snippet collection, go here.

APIs used

	Object	List
Create	set() / update()	push()
Read	valueChanges(), snapshotChanges()	valueChanges(), snapshotChanges()
Update	set() / update()	set() / update()
Delete	remove()	remove()

Cloud Firestore

Snippets / Demo / firebase docs / angularfire2 docs

For angularfire2/firestore mini API showcase and snippet collection, go here.

APIs used

	API
Create	add()
Read	valueChanges(), snapshotChanges()
Update	update()
Delete	remove()

Firebase Storage

Snippets / Demo / firebase docs / angularfire2 docs

For angularfire2/storage mini API showcase and snippet collection, go here.

• Upload file
• Download file
• Remove file

APIs used

	API
Upload	put()
Download	getDownloadURL()
Delete	delete()

Usage

• git clone https://github.com/ElecTreeFrying/angularfire2-demo-app.git
• cd angularfire2-demo-app
• npm install

Create your own firebase app.

1. Select Add Project

2. Select Authentications

3. Click copy WEB SETUP

4. Create the environment files below in src/environments/.

   environment.prod.ts

   export const environment = {
     production: true,
     firebaseConfig: { **PASTE WEB SETUP** }
   };

   environment.ts

   export const environment = {
     production: false,
     firebaseConfig: { **PASTE WEB SETUP** }
   };

Version

• @angular/cli: 6.1.1
• firebase: 5.3.0
• angularfire2: 5.0.0-rc.11

star and fork 🙏🙌 or contribute ❤️

contact me

License

MIT