My app.component.ts
//app.components.ts

import { Component } from '@angular/core';
import {User} from './user';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 title = 'Society CRM';
}

//user.ts
export class User
{
  _id : string;
  name: string;
  email: string;
  username: string;
  password: string;
  phone: string;
  address: string;
  role: string;
  created_date: string;
}

//user-list.component.ts
My user list component file

import {Component,OnInit} from '@angular/core';
import {User} from './user';
import {UserService} from './user.service';
import { Headers, RequestOptions } from '@angular/http';
@Component({
 selector:'user-list',
 templateUrl:'./user-list.html',
 providers: [ UserService ]
})

export class UserListComponent implements OnInit{
errorMessage: string;
users: User[];
mode = 'Observable';
constructor (private userService: UserService) {};
ngOnInit() {
 this.getUsersList();
 alert('here');
}
getUsersList() {
  return this.userService.getUsersList()
                 .subscribe(
                   users => this.users = users,
                   error =>  this.errorMessage = <any>error);
  }
}

//app.module.ts
My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UserListComponent }  from './user-list.component';
import { UserService } from './user.service';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here

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

user.service.ts
My services.ts file

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import {User} from './user';
import { Headers, RequestOptions } from '@angular/http';
@Injectable()
export class UserService
{
        constructor (private http:Http){}
        private api_url = "http://localhost:3000/api/";
        getUsersList() : Observable<User[]>
        {
            let headers = new Headers();
            headers.append('Access-Control-Allow-Origin', '*');
            headers.append('Access-Control-Allow-Credentials', 'true');
            headers.append('Access-Control-Allow-Methods', 'GET');
            headers.append('Access-Control-Allow-Headers', 'Content-Type');
            let options = new RequestOptions({headers: headers});
            return this.http.get(this.api_url+'getUsersList',options)
                .map(this.extractData)
                .catch(this.handleError);

        }

        private extractData(res: Response) {
            let body = res.json();
            return body.data || {};
        }
        private handleError(error: Response | any) {
            // In a real world app, you might use a remote logging infrastructure
            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);
        }
}

I don't know what exactly is happening with the above code, no error being shown on firebug console or browser console. Any help would e thankful