Dev-na-prativa desafio1

main.component.html

<p-panel styleClass="form-group" [toggleable]="true">
  <p-header>
    <span>Panel Form</span>
  </p-header>
  <div class="ui-fluid">
    <div class="ui-g">
      <div class="ui-g-12">
        <app-panel-form></app-panel-form>
      </div>
    </div>
  </div>

</p-panel><p-panel styleClass="form-group" [toggleable]="true">
  <p-header>
    <span>Panel Info</span>
  </p-header>
  <div class="ui-fluid">
    <div class="ui-g">
      <div class="ui-g-12">
        <app-panel-info></app-panel-info>
      </div>
    </div>
  </div>
</p-panel>

main.service.ts

import {Injectable} from '@angular/core';
import {Observable, Subject} from '~root/node_modules/rxjs';

@Injectable({
  providedIn: 'root'
})
export class MainService {

  private client$ = new Subject<any>();

  public setClient(data: any) {
    this.client$.next(data);
  }

  public getClient(): Observable<any> {
    return this.client$.asObservable();
  }

}

panel-form.component.html

<form [formGroup]="formGroup" novalidate>
  <div class="ui-fluid">
    <div class="ui-g">
      <div class="ui-g-12 ui-md-6">
        <label for="nome">Id</label>
        <input type="text" id="id" (change)="onChangeClient($event)" name="id" pInputText formControlName="id" autocomplete="off"/>
      </div>
      <div class="ui-g-12 ui-md-6">
        <label for="nome">Nome</label>
        <input type="text" id="nome" (change)="onChangeClient($event)" name="nome" pInputText formControlName="nome" autocomplete="off"/>
      </div>
    </div>
  </div>
</form>

panel-form.ts

import {Component, OnInit} from '@angular/core';
import {MainService} from '~features/main/main.service';
import {FormBuilder, FormGroup, Validators} from '~root/node_modules/@angular/forms';

@Component({
  selector: 'app-panel-form',
  templateUrl: './panel-form.component.html',
  styleUrls: ['./panel-form.component.css']
})
export class PanelFormComponent implements OnInit {

  public formGroup: FormGroup;

  constructor(private mainService: MainService, private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      id: [undefined, Validators.compose([])],
      nome: [undefined, Validators.compose([])]
    });
  }

  onChangeClient(data: any) {
    const {value} = this.formGroup;
    this.mainService.setClient(value);
  }

}

panel-info.component.html

<pre>
  {{dataCliente | json}}
</pre>

panel-info.component.ts

import {Component, OnInit} from '@angular/core';
import {MainService} from '~features/main/main.service';

@Component({
  selector: 'app-panel-info',
  templateUrl: './panel-info.component.html',
  styleUrls: ['./panel-info.component.css']
})
export class PanelInfoComponent implements OnInit {

  dataCliente: any;

  constructor(private mainService: MainService) {

  }

  ngOnInit() {
    this.mainService.getClient()
      .subscribe((payload: any) => {
        this.dataCliente = payload;
      });
  }

}