Angular2 How to POST data using a service class

Question

I have a simple application form which I am trying to post to the server. I am fairly new to Angular2

How can I pass the data from the component to the service and onto the server for a POST request.

The POST is working fine when I try it directly from FireFox plugin 'httpRequester'

This is the TaskComponent.ts

@Component({
    selector: 'tasks',
    template: `<div mdl class="mdl-grid demo-content">

          <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
                <h3>Create Task Page</h3>   

                <form action="#" (ngSubmit)="onSubmit()">
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="taskname" [(ngModel)]="data.taskname"/>
                    <label class="mdl-textfield__label" for="taskname">Task Name</label>
                    <span class="mdl-textfield__error">Only alphabet and no spaces, please!</span>
                   </div> 
                  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">Create Task</button>
                </form>          
    `,
    directives: [ROUTER_DIRECTIVES, MDL]
})

export class CreateTaskComponent {

    data: any

    constructor() { 
      this.data = {
        //taskname: 'Example Task'
      };
    }

    onSubmit(form) {
      console.log(this.data.taskname);    <--Data is passed upon submit onto the console. Works fine.  

      //Need to call the postApartment method of ApartmentService     
    }
}    

ApartmentService.ts

import {Http, Response} from 'angular2/http'
import {Injectable} from 'angular2/core'
import 'rxjs/add/operator/map';

@Injectable()
export class ApartmentService {

    http: Http;
    constructor(http: Http) {
        this.http = http;
    }

    getEntries() {
        return this.http.get('./api/apartments').map((res: Response) => res.json());
    }

    getProfile(userEmail :string){
       return this.http.get(`./api/apartments/getprofile/${userEmail}`).map((res: Response) => res.json());
    }

    postApartment(){
        // Not familiar with the syntax here
    } 
}

Server.ts

router.route('/api/apartments')          
    .post(function(req, res) {        
        var apartment = new Apartment();
        apartment.name = req.body.name;

        apartment.save(function(err) {
            if (err)
                res.send(err);
            res.json({ message: 'Apartment created!' });
        });
  })

Answer 1

You can inject service via dependency injection and use it in the component

export class CreateTaskComponent {
    constructor(){private _apartmentService: ApartmentService}{}
}

And you can access this in any of the component function via

onSubmit(form) {
  console.log(this.data.taskname);    <--Data is passed upon submit onto the console. Works fine.  

  //Need to call the postApartment method of ApartmentService     
  this._apartmentService.postApartment()
}

And when bootstraping the component you have to add it as dependency via

bootstrap(AppComponent, [ApartmentService]);

Another option for doing the last step is by added providers in the Component decorator like

@Component{
  providers: [ApartmentService]
}

Answer 2

Inject the apartmentService in the component, No need of providers as I have bootstrapped it. (If you bootstartp the service, Do not include it in providers. It breaks the system)

export class CreateTaskComponent {

    data: any

    constructor(private apartmentService: ApartmentService) { 
      this.data = {};
    }

    onSubmit(form) {
      this.apartmentService.postApartment(this.data);           
    }
}    

The critical piece is the postApartment() method in the service

 postApartment(data :any){
          return this.http.post('/api/apartments',
               JSON.stringify(data),{headers : new Headers({'Content-Type':'application/json'})
               })
               .map((res: Response) => res.json()).subscribe();
    } 

Also make sure on the server.js code, the mongoose fields match the http body parameters being passed. I had to fix it to make it work.