Angular Material 6 - mat-table Data from service

Question

I want integrate Data from a service in an angular material table.

---

All the examples I could see refer to hard data in the ts file but do not refer to a service.

My service allows to recover all of my patients, functional with bootstrap but when I want to integrate it with the angular material, I can not do it

Anyone know the solution ?

---

Component.ts

import { Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import { PatientsService } from '../services/patients.service';
import { Patient } from '../models/patient.model';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/observable';
import { Router } from '@angular/router';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';

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

export class PatientListComponent implements OnInit {

displayedColumns = ['prenom', 'nom', 'sexe', 'daten'];
dataSource = new MatTableDataSource<Patient>();

patients: Patient[];
patientsSubscription: Subscription;

constructor(private patientsService: PatientsService, private router: Router) 
{}

ngOnInit() {

 this.patientsService.getPatients().subscribe(
  data => {
    this.dataSource.data = data;
  }
);

 this.patientsService.emitPatients();
 }

 onNewPatient() {
 this.router.navigate(['/patients', 'new']);
 }

 onDeletePatient(patient: Patient) {
 this.patientsService.removePatient(patient);
 }

 onViewPatient(id: number) {
 this.router.navigate(['/patients', 'view', id]);
 }

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

 export interface Element {
 prenom: string;
 nom : string;
 sexe: string;
 daten: new Date ();
 }

---

Component.ts

    <div >
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">


   <ng-container matColumnDef="prenom">
   <th mat-header-cell *matHeaderCellDef> Prénom </th>
   <td mat-cell *matCellDef="let element"> {{element.prenom}} </td>
   </ng-container>


   <ng-container matColumnDef="nom">
   <th mat-header-cell *matHeaderCellDef> Nom de naissance </th>
   <td mat-cell *matCellDef="let element">  {{element.nom}}</td>
   </ng-container>


   <ng-container matColumnDef="daten">
   <th mat-header-cell *matHeaderCellDef> Date de naissance </th>
   <td mat-cell *matCellDef="let element">  {{element.daten}} </td>
   </ng-container>


   <ng-container matColumnDef="sexe">
   <th mat-header-cell *matHeaderCellDef> Sexe </th>
   <td mat-cell *matCellDef="let element">  {{element.sexe}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   </div>

Model

    export class Patient 
    {
    photo: string;
    constructor(public nom: string, public prenom: string, public sexe: 
    string, public daten = new Date ()) {}
    }

Service

    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs/Subject';
    import { Patient } from '../models/patient.model';
    import * as firebase from 'firebase';
    import DataSnapshot = firebase.database.DataSnapshot;
    import {Observable} from "rxjs";

    @Injectable()
    export class PatientsService {

    patients: Patient[] = [];
    patientsSubject = new Subject<Patient[]>();

    emitPatients() {
    this.patientsSubject.next(this.patients);
    }

         savePatients() {
         firebase.database().ref('/patients').set(this.patients);
         }

         getPatients() {
         firebase.database().ref('/patients')
         .on('value', (data: DataSnapshot) => {
         this.patients = data.val() ? data.val() : [];
         this.emitPatients();
         }
         );
         }

        getSinglePatient(id: number) {
        enter code herereturn new Promise(
          (resolve, reject) => {
            firebase.database().ref('/patients/' + id).once('value').then(
             (data: DataSnapshot) => {
              resolve(data.val());
            }, (error) => {
              reject(error);
            }
          );
         }
     );
     }

I don't see other post for this problem.

Answer 1

In my service, i have :

   getPatients(): Observable<Patient[]> {

   firebase.database().ref('/patients')
   .on('value', (data: DataSnapshot) => { this.patients = (data&&data.val()) 
   ? data.val() : this.patients} );
   return of(this.patients);
   }

And in my component :

 ngOnInit() { 

 this.patientsService.emitPatients();
 this.patientsSubscription = 
 this.patientsService.patientsSubject.subscribe((patients: Patient[]) => 
 {this.patients = patients;});
 this.patientsService.getPatients().subscribe(data => 
 {console.log(this.patientsService.patients[0]); this.dataSource.data = 
 data;});