This HTML Code is designed to display elements retrieved from Firebase.
<div class= "sentMessages" *ngFor= "let item of snapshot">
{{item.timestamp.toDate() | date:"medium"}}
{{item.name}}
{{item.message}}
</div>
Contained within app.component.ts, this code aims to fetch a collection from the database.
export class AppComponent {
title = 'ChatApp';
name: string;
color: string = "#127bdc";
message: string = "";
messages: any;
snapshot: any
constructor (private db: AngularFirestore){
this.name = "";
this.messages =db.collection('messages');
}
async addMessage(){
const res = await this.db.collection('messages').add({
name : this.name,
color : this.color,
message : this.message,
timestamp: new Date() });
this.snapshot = await this.messages.get();
}
}
Although addMessage properly saves user input to the Firebase database upon hitting enter, it fails to display the current database contents.