title: Pass data from one component to another and reflect in view
body: <p>In my project i have two components</p>
  
  <p><strong>component1.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MyserviceService } from '../myservice.service';
  
  @Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
  })
  export class Component1Component implements OnInit {
  
  constructor(private Service: MyserviceService) { }
   employee = [
   { id: '001', name: 'michael' },
   { id: '002', name: 'john' },
   { id: '003', name: 'james' },
   { id: '004', name: 'joe' },
   ];
   ngOnInit() {
   }
  
   onSelect(name) {
    alert(name);
    this.Service.setValue(name);
   }
   }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div *ngFor="let emp of employee" (click)="onSelect(emp.name)"&gt;
  Id: {{emp.id}} &lt;br /&gt;
  Name:  {{emp.name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Here onclick emp.name is passed to a service via onselect()</p>
  
  <p>i need this value to be passed to a second component</p>
  
  <p>component2.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  
  @Component({
  selector: 'app-component2',
   templateUrl: './component2.component.html',
   styleUrls: ['./component2.component.css']
   })
   export class Component2Component implements OnInit {
   private selectedName: string;
   constructor() { }
  
    ngOnInit() {
    }
    }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;p&gt;
  selected name is: {{selectedName}}
  &lt;/p&gt;
  </code></pre>
  
  <p>service code is:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class MyserviceService {
   private myValue;
    constructor() { }
     setValue(val) {
      this.myValue = val;
  
    }
  
    getValue() {
      return this.myValue;
   }
   }
  </code></pre>
  
  <p>i need to display name in component2 html code as variable selectedName.</p>