A Little Setup
import {Component} from '@angular/core'; import './cypher-room.css'; @Component({ selector: 'cypher-room', template: require('./cypher-room.html'), styleUrls: ['./cypher-room.css'] }) export class CypherRoomComponent { ngOnInit() { this.authenicateAsGuest(); this.watchForDabaseUserList(); this.watchForChatUpdate(); } }
The Bad Firebase Implementation
firebase.database().ref('/cypherapp/rooms/room1/usersHere').on('value', (snapshot) => { console.log('snapshot key: ' + snapshot.key + ' and value: ' + snapshot.val()); })
An Aside to Say that Gitter Is Awesome
The Performance Solution: Zone.js to the Rescue!
firebase.database().ref('/cypherapp/rooms/room1/usersHere').on( 'value', (snapshot) => { this.zone.run(() => { console.log('snapshot key: ' + snapshot.key + ' and value: ' + snapshot.val()); }
constructor(private zone: NgZone) {
import {NgZone} from "@angular/core";