title: Pass data from one Component to another Component in angular4
body: <p>I have two Components(Component1 and Component2) in my Angular Application. These two components I have rendered in my app component.
  Now I want to send a value from Component1 to Component2. How to Send it. Are there any best practices??</p>
  
  <p>In Component1 I have a code Like this.
  Component1.html</p>
  
  <pre><code>&lt;button (click)="passData()"&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>Component1.ts</p>
  
  <pre><code>import { Component, OnInit , Output , EventEmitter } from '@angular/core';
  @Component({
    selector: 'app-component1',
    templateUrl: './component1.component.html',
    styleUrls: ['./component1.component.css']
  })
  export class Component1Component implements OnInit {
  
     Component1Variable:string="Component1VariableSent";
    constructor() { }
    ngOnInit() {
    }
     @Output()
     SendValue=new EventEmitter&lt;string&gt;();
     passData()
     {
          this.SendValue.emit(this.Component1Variable);
     }
  }
  </code></pre>
  
  <p>In Component2.html I have </p>
  
  <pre><code>&lt;app-component1 (SendValue)="ValueFromComp1($event)"&gt; &lt;/app-component1&gt;
  {{ValueFromComponent1}}
  </code></pre>
  
  <p>In Component2.ts I have </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 {
    ValueFromComponent1:any;
    constructor() { }
  
    ngOnInit() {
    }
    ValueFromComp1(var1:any)
    {
        this.ValueFromComponent1=var1;
    }
  
  }
  </code></pre>
  
  <p>In appcomponent.html I hav code Like this.</p>
  
  <pre><code>&lt;app-component1&gt;&lt;/app-component1&gt;
  &lt;app-component2&gt;&lt;/app-component2&gt;
  </code></pre>
  
  <p>Now I am getting to send the value from component1 to component2. But there is a click button two times in the output.</p>
  
  <p>And another question is that I want to transfer data from one Component to another Component which resides in the same hirearchy of component tree.
  By doing in the above way I am not getting the components in the same hirearchy of component tree.</p>