//ESTRUTURA HTML DA TELA DE CADASTRO
<sge-content-header nome="Área"></sge-content-header>

  <div class="box box-primary content box-content-custom">

      <form [formGroup]="areaForm" novalidate>
        <div class="box-body">
          <div class="row">
              <div class="col-xs-3">
                <sge-input errorMessage="A sigla deve conter 3 caracteres" label="Sigla">
                    <input class="form-control" formControlName="sigla" autocomplete="off" placeholder="Sigla">
                </sge-input>
              </div>
              <div class="col-xs-9">
                  <sge-input errorMessage="O nome deve conter no mínimo 3 caracteres" label="Nome">
                      <input class="form-control" formControlName="nome" autocomplete="off" placeholder="Nome">
                  </sge-input>
              </div>
            </div>
            <div class="row">
                <div class="box-footer">
                    <button (click)="salvarArea(areaForm.value)" type="submit" class="btn btn-primary">Cadastrar</button>
                </div>
            </div>
          </div>
      </form>
  </div>
  <sge-area-list (areaEvent)="addAreaEvent($event)"></sge-area-list>


//COMPONENT DA TELA DE CADASTRO

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { Area } from '../shared/area.model';
import { AreaService } from '../shared/area.service';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'sge-area',
  templateUrl: './area.component.html'
})
export class AreaComponent implements OnInit {

  constructor(private areaService: AreaService, private formBuilder: FormBuilder) { }

  @Input() area;

  areaForm: FormGroup;

  @Output() areaEvent = new EventEmitter<Area>();

  ngOnInit() {
    this.areaForm = this.formBuilder.group({
      sigla:this.formBuilder.control('',[Validators.required, Validators.minLength(3), Validators.maxLength(3)]),
      nome:this.formBuilder.control('',[Validators.required, Validators.minLength(3), Validators.maxLength(45)])})
  }

  salvarArea(area){
    this.areaService.salvarArea(area).subscribe((area:string)=>{
      console.log(area);
    });
    this.areaEvent.emit(area);

  }

}



//ESTRUTURA HTML DA TELA DE LISTAGEM
<div class="box-header box-header-custom">
  <h3 class="box-title">Listagem de Áreas Cadastradas</h3>

  <div class="box-tools">
    <div class="input-group input-group-sm" style="width: 150px;">
      <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

      <div class="input-group-btn">
        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
      </div>
    </div>
  </div>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
  <tr>
    <th>Sigla</th>
    <th>Nome</th>
    <th>Ação</th>
  </tr>
  <tr *ngFor="let area of areas">
    <td>{{area.sigla}}</td>
    <td>{{area.nome}}</td>
    <td>
        <span class="btn-align"><a (click)="editarArea(area)" class="edit"><i class="fa fa-edit"></i></a></span>
        <span class="btn-align"><a (click)="removerArea(area)" class="remove"><i class="fa fa-trash"></i></a></span>
    </td>
  </tr>
</table>
</div>



//COMPONENTE REFERENTE A TELA DE LISTAGEM
import { Component, OnInit, Input } from '@angular/core';
import { AreaService } from '../shared/area.service';
import { Area } from '../shared/area.model';

@Component({
  selector: 'sge-area-list',
  templateUrl: './area-list.component.html'
})
export class AreaListComponent implements OnInit {

  areas: Area[];

  constructor(private areaService:AreaService) { }

  ngOnInit() {
    this.listaAreas();
  }

  listaAreas() {
    this.areaService.areas().subscribe(areas=>this.areas = areas);
  }

  addAreaEvent($event){
    console.log("recebeu o evento");
    console.log($event);
  }

}



//SERVICE

import { Http, Response, RequestOptions, Headers } from "@angular/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { ErrorHandler } from "../../app.error.handler";
import { Area } from "./area.model";
import { SGE_API } from "../../app.apis";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';



@Injectable()
export class AreaService{
    constructor(private http:Http){}

    area: Area;
    @Output() areaEvent = new EventEmitter<Area>();

    areas():Observable<Area[]>{
        return this.http.get(`${SGE_API}/areas`)
        .map(response=>response.json())
        .catch(ErrorHandler.handleError);
    }

    salvarArea(area: Area):Observable<string>{
        const headers = new Headers();
        headers.append('Content-Type','application/json');

        return this.http.post(`${SGE_API}/areas`,JSON.stringify(area),
        new RequestOptions({headers:headers}))
        .map(response=>response.json())
    }

}