import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { Post } from './model/post';
import { PostService } from './service/post.service';

@Component({
  selector: 'setup',
  templateUrl: './setup.component.html',
  styleUrls: ['./setup.component.scss']
})
export class SetupComponent implements OnInit {

  @Output()
  change: EventEmitter<string> = new EventEmitter();

  postUsers(input){
    this.postService.postUser(input)
      .subscribe(
        post => {
          this.post = post
        },
        err => {
          console.log(err);
        });
  }

  clicked(value) {
    console.log(value);
    this.postUsers(this.input)
    // this.change.emit(value);
  }

  complexForm : FormGroup;
  constructor(private postService: PostService) {}

  post: Post[];

  ngOnInit() {}

}

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

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class PostService {

  constructor (private http: Http) {}
  private registerUrl = 'http://localhost:2001/api/users/register';

  postUser(user:Post) : Observable<Post[]>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.registerUrl, user, options)
      .map(this.extractData)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }
  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);
  }

}

export class Post {
    constructor(
        public id: number,
        public name: string,
        public email: string,
        public password: string
    ){}
}

this.postUsers(this.input)
  .then(function(){
  });

clicked(value) {
    console.log(value);
    this.postUsers(this.input)
    // this.change.emit(value);
  }

clicked(value) {
    console.log(value);
    this.postUsers(this.input)
      .then(function(){
        this.change.emit(value);
      });
  }

clicked(value) {
    console.log(value);
    const runThis = this.postUsers(this.input);
    console.log(runThis);
    // this.change.emit(value);
  }