Angular 4 Firebase Read data from database and display to browser

Question

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??

Nothing yet.. I got no idea how i am suppose to make the data apear on browser.. — Vasilis Michail
– Vasilis Michail, Commented Jul 21, 2017 at 17:23
You should create the data model in your class and bind it to the view (html). — Vega
– Vega, Commented Jul 21, 2017 at 17:28
Yes yes I know this but where I find the code which displays the data from my database on the Browser?? I mean if it was php I would use <?= row['something'] ?> on html tag.. but now I completly lost on how to display data from database on browser.. — Vasilis Michail
– Vasilis Michail, Commented Jul 21, 2017 at 17:31
The official tuto is good to learn the basics of Angular :) angular.io/tutorial — AVJT82
– AVJT82, Commented Jul 21, 2017 at 20:22

Vasilis Michail · Accepted Answer · 2017-07-22 23:47:20Z

3

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

answered Jul 22, 2017 at 23:47

Vasilis Michail

4032 gold badges6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pravinraj Venkatachalam Over a year ago

I 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 Over a year ago

How can i get a single object instead of a list??

Collectives™ on Stack Overflow

Angular 4 Firebase Read data from database and display to browser

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related