fetching user data from firebase database and displaying in component.html in a table

Question

i want to fetch user data from the database in firebase and display that data inside HTML tables.

should i be importing some libraries? what exactly should i include in my .ts file? i need a step by step procedure on how to do this. i am a beginner, and just learning Angular.enter image description here

i dont know what the hell im doing

Pls let me know if the answer did help – Ethan Vu Jul 10 '19 at 12:55 — Ethan Vu, Jul 10 '19 at 12:55

Ethan Vu · Answer 1 · 2019-07-10T03:42:33.223

0

I'm not sure what you had install to fetch data from FireBase but look at the code i assume that you used AngularFire.

You should follow this quick installation steps to set up the basic pattern to read a document as an Observable and use its data in a component template.

In your student-user.component.ts file:

  users: Observable<any>;

  constructor(private db: AngularFirestore) {
  }

  ngOnInit(){
      this.users = db.collection('users').valueChanges();
  }

In your HTML template, you unwrap the observable and use *ngFor directive to loop over users and create elements base on the data provided:

<p *ngFor="let user of users | async"> {{user.userName}} </p>

Alternatively, you can subscribe to the Observable somewhere in your ts file to unwrap the data, but you should unsubscribe to it during ngOnDestroy() to avoid memory leak

 this.subscription = this.users.subscribe(console.log);

 ngOnDestroy() {
  this.subscription.unsubscribe();
 }

edited Jul 10 '19 at 03:42

answered Jul 10 '19 at 02:43

Ethan Vu

2,911
9
25

1

thank you Ethan, this did help me. my code works now. it also helped to follow the CRUD methods tutorial. – Aanyu Deborah O Jul 12 '19 at 06:41
Glad to here that, your welcome, you could upvote and correct an answer if you found it helpful, thank you – Ethan Vu Jul 12 '19 at 06:45
haha...ive only just started being active on stackoverflow...my reputation wont let me upvote... – Aanyu Deborah O Jul 12 '19 at 07:04

score -1 · Answer 2 · answered Jul 12 '19 at 07:02

//in my students.component.ts...

import { map} from 'rxjs/operators'
import {FirebaseService} from '../services/firebase.service';
import {Router} from '@angular/router';
import { AngularFirestore} from "angularfire2/firestore";


@Component({
  selector: 'app-student-user',
  templateUrl: './student-user.component.html',
  styleUrls: ['./student-user.component.scss']
})

/*from CRUD example*/
export class StudentUserComponent implements OnInit{
  students: any;
  students_data :any

  constructor(
    public firebaseService: FirebaseService,
    private router: Router,
    private db: AngularFirestore
  ) { }


 ngOnInit() {

  this.getStudents()

}


getStudents() {
  this.students_data = this.db.collection('User').snapshotChanges().pipe(map(changes => {

  return changes.map(a => {
  const data: any = a.payload.doc.data();
  data.id = a.payload.doc.id;
  return data;
  });
  })
  );

  this.students_data.subscribe(
  res => {
  console.log(res);
  this.students = res;
    //this.blogs_snapshot = res;
  }
  );

  }

} '



   //in my students.component.html...i used data binding

   <h1>LOGGED IN STUDENTS</h1>

   <div style="padding: 40px !important ; background: white !important">
      {{students|json}}
    </div> 

    <table class="ui compact celled definition table" style="margin-left: 200px; 
    width:700px">
        <thead class="full-width">
          <tr>
            <th></th>
            <th>Name</th>
            <th>Date of Account creation</th>
            <th>E-mail address</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let student of students ">
            <td class="collapsing">
              <div class="ui fitted slider checkbox">
                <input type="checkbox"> <label></label>
              </div>
            </td>
            <td>{{student.full_name}}</td>
            <td>{{student.created_at}}</td>
            <td>{{student.email}}</td>
            <td>{{student.gender}}/td>
          </tr>
        </tbody>

        <tfoot class="full-width">
          <tr>
            <th></th>
            <th colspan="4">
              <div class="ui right floated small primary labeled icon button">
                <i class="user icon"></i> Add User
              </div>
              <div class="ui small  button">
                Approve
              </div>
              <div class="ui small  disabled button">
                Approve All
              </div>
            </th>
          </tr>
        </tfoot>
      </table>'

//in my firebase.service.ts

'import { Injectable, OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService{

  constructor() { }
}

fetching user data from firebase database and displaying in component.html in a table

2 Answers2

Linked