title: Data table is showing no data available in table using Angular
body: <p>When I was trying to show data table in angular js. It shows no data available in table but there are 4 records in table. See screenshot below.</p>
  
  <p><a href="https://i.stack.imgur.com/hdaW9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hdaW9.png" alt="enter image description here"></a></p>
  
  <p>Here's what I did.</p>
  
  <p><strong>user.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { UserModel }         from './user-model';
  import { UserService }       from './user.service';
  declare var $ :any;
  
  @Component({
    selector: 'user-page',
    template: require('./user.component.html'),
    providers: [ UserService ]
  })
  
  export class UserComponent implements OnInit {
  
    data: any;
    errorMessage: string;
  
   constructor(private userService:UserService){ }
  
   ngOnInit() { 
    this.getUsers();
   }
  
   getUsers() {  
   this.userService.getUsers()
                   .subscribe(
                     users =&gt; {this.data = users; 
                                $(function(){
                                 $("#user-table").DataTable();
                                });
                              },
                     error =&gt;  this.errorMessage = &lt;any&gt;error);
    }
  }
  </code></pre>
  
  <p><strong>user.service.ts</strong></p>
  
  <pre><code>import { Injectable }              from '@angular/core';
  import { Http, Response }          from '@angular/http';
  import { Headers, RequestOptions } from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  
  import { UserModel } from './user-model';
  
  @Injectable()
  export class UserService {
        private usersUrl = 'http://localhost/larang/public/api/users';  
  constructor (private http: Http) {}
  
  getUsers(): Observable&lt;UserModel[]&gt; { 
   return this.http.get(this.usersUrl)
                  .map(this.extractData)
                  .catch(this.handleError);
  }
  
  
  private extractData(res: Response) { 
    let body = res.json();
  
    return body.data || { };
  }
  
  private handleError (error: Response | any) { console.log(error);
  
   let errMsg: string;
   if (error instanceof Response) {
    const body = error.json() || '';
    const err = body.error || JSON.stringify(body);
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
   } else {
     errMsg = error.message ? error.message : error.toString();
   }
  console.error(errMsg);
  return Observable.throw(errMsg);
   }
  }
  </code></pre>
  
  <p><strong>user.component.html</strong></p>
  
  <pre><code>&lt;table id="user-table" class="table table-bordered table-hover"&gt;
   &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Added On&lt;/th&gt;
        &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
         &lt;tr *ngFor="let item of data"&gt;
           &lt;td&gt;{{item.name}}&lt;/td&gt;
           &lt;td&gt;{{item.email}}&lt;/td&gt;
           &lt;td&gt;{{item.added}}&lt;/td&gt;
         &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>this.data</strong> looks like this</p>
  
  <pre><code>[
   {"name":"John Doe","email":"john.doe@gmail.com","added":"2017-04-26"},
   {"name":"Ramkishan","email":"Ramkishan@gmail.com","added":"2017-04-26"},
   {"name":"Jason Bourne","email":"jason@gmail.com","added":"2017-04-26"},
   {"name":"RK","email":"ramkishan.suthar@ranosys.com","added":"2017-04-26"}
  ]
  </code></pre>
  
  <p>What I am doing wrong please help. It will be very helpful for newbies in Angular JS like me.</p>