@Component({
selector: 'login',
templateUrl: 'app/views/login.html',
providers: [ LoginService ],
styleUrls: [ 'css/login.css' ]
})
export class Login {
postData: string;

constructor(private _loginService: LoginService) {}

onLogin(user : string, password: string) {
    if (!user && !password){return;}
    this._loginService.login(user , password)
        .subscribe (
            data => this.postData = JSON.stringify({user : user , password: password}),
            error => alert(error),
            () => console.log(this.postData)
        );
}
}

<label for="user">User</label>
<input type="text" id="user" #user>
<label for="password">Password</label>
<input type="password" id="password" #password>
<button type="submit" (click)="onLogin(user.value, password.value); user.value=''; password.value=''">Login</button>

@Injectable()
export class LoginService {
constructor (private _http: Http){}

private loginUrl = './users';

login(user: string, password: string): Observable<User> {
    let body = JSON.stringify({"user": user, "password": password});
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});

    return this._http.post(this.loginUrl, body, options)
        .map(this.extractData)
        .catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}

private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}
}