title: How to implement get service to fetch data into my mat-table in angular 2
body: <p>I have created a dropdown with name <strong>department</strong> using the <strong>mat-selec</strong>t and applied filter for the dropdown.</p>
  
  <p>I created a service with name <strong>accountdetail</strong> from which i can fetch data from a json file into the department dropdown.</p>
  
  <p>I have implemented the table using angular materials <strong>mat-table</strong> component and i want fetch data from the same service in to my table.</p>
  
  <h2>Below shown is my accountdetail.service.ts</h2>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  import {RouterModule, Router} from '@angular/router';
  
  @Injectable()
  export class AccountdetailService {
  
    constructor(private http:Http ) { }
  
    accountdetails()
    {
      return this.http.get('http://localhost:4200/assets/accountdetails.json')
      .map(result =&gt; result.json());
    }}
  </code></pre>
  
  <h2>account.component.ts</h2>
  
  <pre><code>import {Component, ViewChild, Inject, OnInit} from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { ReactiveFormsModule } from '@angular/forms';
  import { FormGroup } from '@angular/forms';
  
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  
  import { AccountdetailService } from '../accountdetail.service';
  
  
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    styleUrls: ['./account.component.scss']
  
  })
  
  
  export class AccountComponent implements OnInit {
  
   filtertext:string;
   departments : any;
  
  
  constructor( private accdetailservice: AccountdetailService ) { }
  
  ngOnInit(){
    this.accdetailservice.accountdetails()
    .subscribe(data =&gt; this.departments = data);
  
  
    //.subscribe(data =&gt; {console.log(data)})
  }
  
  
  
    /* Table Starts here
    ---------------------- */
   displayedColumns1 = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
    dataSource1= new MatTableDataSource&lt;Element&gt;(ELEMENT_DATA);
  
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
     ngAfterViewInit() {
      this.dataSource1.paginator = this.paginator;
    }
  }
  
  export interface Element {
    accno: number;
    accdesc: string;
    investigator: string;
    accCPC: string;
    location:string;
    cdeptid: number;
    depdesc: string;
  }
  
  const ELEMENT_DATA: Element[] = [
    {accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'},
  
    {accno: 5400344, accdesc: 'ASTRALIS LTD', investigator:'Gelbard, Alyssa.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}
  
  ];
  </code></pre>
  
  <h2>account.component.html</h2>
  
  <pre><code>&lt;mat-toolbar color="primary" style="width:100%"&gt; WELCOME &lt;/mat-toolbar&gt;&lt;br/&gt;
  
  &lt;h3&gt;Department&lt;/h3&gt;&lt;br/&gt;
  
              &lt;mat-form-field&gt;
                        &lt;mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="dept"&gt;
                        &lt;input class="input1" matInput type="text" [(ngModel)]="filtertext"&gt;
                          &lt;mat-option *ngFor="let dep of departments  | filter:filtertext  " [value]="dep.department" &gt;
                            {{ dep.department }}
                          &lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
  
  
  &lt;!-- Table starts here --&gt;
  
  &lt;mat-card&gt;
  &lt;div class="example-container mat-elevation-z8"&gt;
    &lt;mat-table #table [dataSource]="dataSource1"&gt;
  
      &lt;!-- Account No. Column --&gt;
      &lt;ng-container matColumnDef="accno"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account No. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.accno}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Account Description Column --&gt;
      &lt;ng-container matColumnDef="accdesc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Description &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.accdesc}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Investigator Column --&gt;
      &lt;ng-container matColumnDef="investigator"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Investigator &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.investigator}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Account CPC Column --&gt;
      &lt;ng-container matColumnDef="accCPC"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account CPC &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.accCPC}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
       &lt;!-- Location Column --&gt;
      &lt;ng-container matColumnDef="location"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Location &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.location}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
       &lt;!-- Client Dept ID Column --&gt;
      &lt;ng-container matColumnDef="cdeptid"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; ClientDeptID &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.cdeptid}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;!-- Dept Description Column --&gt;
      &lt;ng-container matColumnDef="depdesc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Dept Description  &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.depdesc}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns1" &gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns1;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  
    &lt;mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"&gt;
    &lt;/mat-paginator&gt;
  &lt;/div&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>I want to know how can i change my table code snippet in my <strong>accountcomponent.ts</strong> file and subscribe the data from the service.</p>
  
  <p>can anybody please guide me through this.....?</p>