Databinding via between components: Emitters: via service.ts

00-source_component.html

<i class="material-icons" (click)="setEditConsultant(element)">edit</i>

01-source_component.ts

import { DataService } from '../data.service'

constructor(public dws: DataWebService, public ds: DataService) {
  }


// send edit consultant to service
  setEditConsultant(consultant) {
    this.ds.setEditableConsulatant(consultant);
    this.ds.consultantUpdate.emit(consultant);
  }

03-data-service.ts

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class DataService {
  consultantUpdate = new EventEmitter<any>();
  consultantDetailsUpdate = new EventEmitter<any>();
    
  consultant: any;
  consultant_details: any;
  constructor() { }
   setEditableConsulatant(consultant) {
   this.consultant = consultant;
 }
}

04-data_recipent_component.ts

ngOnInit() { 
    // get editable consultant data from webservice manualy first time
    this.editable_consultant = this.ds.consultant;
    
    // get consultant data when it change in consultant component antomatically
    this.ds.consultantUpdate.subscribe(
      (data) => {
        console.log(data)
        this.editable_consultant = data;
      }
    );
    
  }

05-data_recipent_component.html

<div class="mat-elevation-z8 registration-form">
  <form [formGroup]="consultant" (ngSubmit)="submitForm(consultant)" style=" padding-left: 20px">

    <md-form-field class="example-full-width">
      <input mdInput placeholder="First Name" [(ngModel)]="editable_consultant.firstname" [formControl]="consultant.controls['firstname']">
      <md-error>{{getErrorMessage('firstname')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="Last Name" [(ngModel)]="editable_consultant.lastname" [formControl]="consultant.controls['lastname']">
      <md-error>{{getErrorMessage('lastname')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input type="email" mdInput placeholder="Email" [(ngModel)]="editable_consultant.email" [formControl]="consultant.controls['email']">
      <md-error>{{getErrorMessage('email')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="Admin User Name" [(ngModel)]="editable_consultant.admin_username" [formControl]="consultant.controls['admin_username']">
      <md-error>{{getErrorMessage('admin_username')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input type="number" mdInput placeholder="Pincode" [(ngModel)]="editable_consultant.pincode" [formControl]="consultant.controls['pincode']">
      <md-error>{{getErrorMessage('pincode')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="State" [(ngModel)]="editable_consultant.state"  [formControl]="consultant.controls['state']">
      <md-error>{{getErrorMessage('state')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="District" [(ngModel)]="editable_consultant.district" [formControl]="consultant.controls['district']">
      <md-error>{{getErrorMessage('district')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="Taluk" [(ngModel)]="editable_consultant.taluk" [formControl]="consultant.controls['taluk']">
      <md-error>{{getErrorMessage('taluk')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input mdInput placeholder="Street" [(ngModel)]="editable_consultant.street" [formControl]="consultant.controls['street']">
      <md-error>{{getErrorMessage('street')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input type="number" mdInput placeholder="Mobile No" [(ngModel)]="editable_consultant.phone" [formControl]="consultant.controls['phone']">
      <md-error>{{getErrorMessage('phone')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
      <input type="number" mdInput placeholder="Alternate Mobile No" [(ngModel)]="editable_consultant.phone2"  [formControl]="consultant.controls['phone2']">
      <md-error>{{getErrorMessage('phone2')}}</md-error>
    </md-form-field>

    <md-select placeholder="Prefered Platform" [(ngModel)]="editable_consultant.preferred_messaging_platform" [formControl]="consultant.controls['preferred_messaging_platform']">
      <md-option value="App">App</md-option>
      <md-option value="Whatsapp">Whatsapp</md-option>
    </md-select>

    <md-form-field class="example-full-width">
      <input type="password" mdInput placeholder="Password 1" [(ngModel)]="editable_consultant.password"  [formControl]="consultant.controls['password']">
      <md-error>{{getErrorMessage('password')}}</md-error>
    </md-form-field>

    <md-form-field class="example-full-width">
    <input type="password" mdInput placeholder="Password 2" [(ngModel)]="editable_consultant.password2"  [formControl]="consultant.controls['password2']">
    <md-error>{{getErrorMessage('password2')}}</md-error>
  </md-form-field>

    <br>
    <button class="btn btn-success" type="submit" md-raised-button color="primary" >Register This Consultant</button>
    <hr>

  </form>
</div>