I am learning Angular 4 and I am using firebase database.But I am pletly 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: './aboutponent.html',
  styleUrls: ['./aboutponent.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??

I am learning Angular 4 and I am using firebase database.But I am pletly 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.ponent.html',
  styleUrls: ['./about.ponent.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??

• javascript
• angular
• typescript
• firebase
• firebase-realtime-database

Share Improve this question Follow edited Jul 21, 2017 at 17:03 Vasilis Michail asked Jul 21, 2017 at 16:55 Vasilis MichailVasilis Michail 40322 gold badges66 silver badges1919 bronze badges 6

• What do you have in about.ponent.html? – Vega Commented Jul 21, 2017 at 17:14
• 1 Nothing yet.. I got no idea how i am suppose to make the data apear on browser.. – 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 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 pletly lost on how to display data from database on browser.. – Vasilis Michail Commented Jul 21, 2017 at 17:31
• The official tuto is good to learn the basics of Angular :) angular.io/tutorial – AVJT82 Commented Jul 21, 2017 at 20:22

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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.ponent.html',
  styleUrls: ['./about.ponent.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