export class User {
username: string;
password: string;
constructor(){}
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserService } from './user.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

import { User } from './user';

@Injectable()
export class UserService {

  private baseUrl: string='http://localhost:8080/api';
  private headers = new Headers({'Content-Type':'application/json'});
  private options = new RequestOptions({headers:this.headers});
  private user: User;

  constructor(private _http: Http) { }

  getUsers() {
    return this._http.get(this.baseUrl + '/users', this.options)
      .map((response: Response) => response.json())
        .catch(this.errorHandler);
  }

  errorHandler(){
    return Observable.throw(Error || "!!! SERVER ERROR !!!");
  }
}

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

import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  public users: User[];

  constructor(private _userService: UserService) {}

  ngOnInit() {
    this._userService.getUsers().subscribe((users)=>{
      this.users=users;
    }, (error)=>{
      console.log(error);
    })
  }
}

<td class="pt-4">{{user?.username}}</td>
<td class="pt-4">{{user?.password}}</td>