This document discusses how to connect Angular applications to Firebase services like authentication, realtime database, cloud functions, and more. It provides code examples for setting up an Angular project with Angular CLI, connecting to Firebase, and implementing authentication, reading and writing to the realtime database, and creating cloud functions. The document promotes Angular and Firebase as a powerful combination for building modern web applications.

1. Angular is on Fire(base)!
Shmuela Jacobs

2. Shmuela Jacobs
Front-end Developer & Consultant

3. Firebase

4. 4

5. https://github.com/angular/angular-cli
Angular CLI

6. https://github.com/angular/angularfire2
AngularFire2

7. Angular & Firebase
Authentication
Real Time Database
Cloud Functions
Best Practices
NEW!

8. Project Setup
npm i angular-cli -g
ng new my-app --style=scss --prefix=sj
-it --routing
// .angular-cli.json
{...
"defaults": {
...
"inline": {
"style": false,
"template": true
}
}
}

9. Connecting to Firebase
npm i firebase angularfire2 -S
// firebase.config.ts
export const firebaseConfig = {
apiKey: "A-Long_api-key",
authDomain: "fir-xyz.firebaseapp.com",
databaseURL: "https://fir-xyz.firebaseio.com",
storageBucket: "fir-xyz.appspot.com",
};
// app.module.ts
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from './firebase.config';
@NgModule({ ...
imports: [
AngularFireModule.initializeApp(firebaseConfig),
], ...
})
export class AppModule { }

10. Authentication
Email + Password
OAuth
Smart user management

11. Authentication
ng g s auth
// auth.service.ts
@Injectable()
export class AuthService {
login(username, password) {...}
login(provider)
logout() {...}
getUser() {...}
}

12. Authentication
ng g s auth
// auth.service.ts
@Injectable()
export class AuthService {
constructor(public af: AngularFire) {
this.af.auth.subscribe((authResponse: FirebaseAuthState) => {
if (authResponse) { ... } else { ... }
})
}
login(username, password) {...}
login(provider)
logout() {...}
getUser() {...}
}

13. Database
Real time
Read/write protection
Lists
Objects
Queries - observables!

14. Database - Read
ng g s data
// data.service.ts
@Injectable()
export class DataService {
constructor(private af: AngularFire) {
this.itemList = this.af.database.list('/list');
}
getItem(id) {
const itemObservable = this.af.database.object(`/items/${id}`);
itemObservable.subscribe(item => this.currentItem = item);
return itemObservable;
}
}

15. Database - Write
saveNewItem(item) {
return this.af.database.list(`/list`)
.push(item)
.then(savedItem => {
...
return savedItem;
})
.catch(error => console.error(error));
}
saveExistingItem (item, key) {
return this.af.database.object(`/list/${key}`)
.set(item)
.then(() => ... )
.catch(error => console.error(error));
}

16. Cloud Functions
Server side functions
DB Triggers
Manage storage
Google APIs
Notifications

17. // functions/index.js
const functions = require('firebase-functions');
// Import Admin SDK
const admin = require("firebase-admin");
admin.initializeApp(functions.config().firebase);
const db = admin.database();
exports.myFunction = functions.database.ref('/list/{id}')
.onWrite(event => {
... event.data.val() ...
... event.params.id ...
return db.ref('otherList').update(listItem);
})
Cloud Functions
npm i -g firebase-tools
firebase login
firebase init functions

18. More in Firebase
Storage
Notifications
Invites
Hosting
AdWords
Analytics
...and more!

19. Shmuela Jacobs
shmuela@ng-girls.org
github.com/shmool
@ShmuelaJ
ng-girls.org