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.

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

APIs used

	API
# (Email and password)	createUserWithEmailAndPassword()
# (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