/angularfire2-demo-app

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

Primary LanguageTypeScriptMIT LicenseMIT

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