title: Angular Material 6 - mat-table Data from service
body: <p>I want integrate Data from a service in an angular material table. </p>
  
  <hr>
  
  <p>All the examples I could see refer to hard data in the ts file but do not refer to a service.</p>
  
  <p>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</p>
  
  <p>Anyone know the solution ?</p>
  
  <hr>
  
  <p>Component.ts</p>
  
  <pre><code>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&lt;Patient&gt;();
  
  patients: Patient[];
  patientsSubscription: Subscription;
  
  constructor(private patientsService: PatientsService, private router: Router) 
  {}
  
  ngOnInit() {
  
   this.patientsService.getPatients().subscribe(
    data =&gt; {
      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 ();
   }
  </code></pre>
  
  <hr>
  
  <p>Component.ts</p>
  
  <pre><code>    &lt;div &gt;
      &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  
  
     &lt;ng-container matColumnDef="prenom"&gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Prénom &lt;/th&gt;
     &lt;td mat-cell *matCellDef="let element"&gt; {{element.prenom}} &lt;/td&gt;
     &lt;/ng-container&gt;
  
  
     &lt;ng-container matColumnDef="nom"&gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Nom de naissance &lt;/th&gt;
     &lt;td mat-cell *matCellDef="let element"&gt;  {{element.nom}}&lt;/td&gt;
     &lt;/ng-container&gt;
  
  
     &lt;ng-container matColumnDef="daten"&gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Date de naissance &lt;/th&gt;
     &lt;td mat-cell *matCellDef="let element"&gt;  {{element.daten}} &lt;/td&gt;
     &lt;/ng-container&gt;
  
  
     &lt;ng-container matColumnDef="sexe"&gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Sexe &lt;/th&gt;
     &lt;td mat-cell *matCellDef="let element"&gt;  {{element.sexe}} &lt;/td&gt;
     &lt;/ng-container&gt;
  
     &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
     &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
     &lt;/table&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>    export class Patient 
      {
      photo: string;
      constructor(public nom: string, public prenom: string, public sexe: 
      string, public daten = new Date ()) {}
      }
  </code></pre>
  
  <p>Service</p>
  
  <pre><code>    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&lt;Patient[]&gt;();
  
      emitPatients() {
      this.patientsSubject.next(this.patients);
      }
  
           savePatients() {
           firebase.database().ref('/patients').set(this.patients);
           }
  
           getPatients() {
           firebase.database().ref('/patients')
           .on('value', (data: DataSnapshot) =&gt; {
           this.patients = data.val() ? data.val() : [];
           this.emitPatients();
           }
           );
           }
  
          getSinglePatient(id: number) {
          enter code herereturn new Promise(
            (resolve, reject) =&gt; {
              firebase.database().ref('/patients/' + id).once('value').then(
               (data: DataSnapshot) =&gt; {
                resolve(data.val());
              }, (error) =&gt; {
                reject(error);
              }
            );
           }
       );
       }
  </code></pre>
  
  <p>I don't see other post for this problem. </p>