Angular 4 Firebase Read data from database and display to browser
Well there is no need to use console.log() if you want to display data on Browser.Angularfire has its own functions for this. This link focus exactly on your problem
Here is an example that takes all the users name from a database and displays them as a list
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
users:FirebaseListObservable<any>;;
constructor(db2: AngularFireDatabase) {
this.users = db2.list('users');
}
ngOnInit() {
}
And the following Html code
<div class="container">
<p>Show all users</p>
<ul>
<li *ngFor="let user of users | async">
{{ user.name | json }}
</li>
</ul>
</div>
Hope it reduced your confusion on the matter.If you didnt understant something plz ask me again
Vasilis Michail
I am currently on my last year of the University of Thessaly computer science department.I focus on web development
Updated on June 05, 2022Comments
-
Vasilis Michail almost 2 years
I am learning Angular 4 and I am using firebase database.But I am completly lost on how I can make the objects apear on the browser of my application. I currently want to take all the data from users and display them on the browser.
import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; import * as firebase from 'firebase/app'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { constructor() { var allUsers = firebase.database().ref('users/'); var db = firebase.database().ref('/users/'); // Attach an asynchronous callback to read the data at our posts reference db.on("value", function(snapshot) { console.log(snapshot.val()); }, function (errorObject) { console.log("The read failed: " + errorObject.code); }); } ngOnInit() { } }
Everything works fine and I can see my data on the console.But can you help me on how I can make the data on the console apear on the browser??
-
Pravinraj Venkatachalam about 6 yearsI would like to save the values from the firebase to an array. How to parse the values. I displayed in the html with the help of asyn. How can that be done
-
Aashish Kumar almost 6 yearsHow can i get a single object instead of a list??