title: Angular 5 Pass data on click event from parent component to child component on button clicked at parent component
body: <p>i have some data bind in table and on click of any specific  i want to show current clicked object more related data in to another component(child component) </p>
  
  <p>for example the data I'm taking from this link:
  <a href="http://jsonplaceholder.typicode.com/users" rel="noreferrer">http://jsonplaceholder.typicode.com/users</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;th&gt;
        Id
      &lt;/th&gt;
      &lt;th&gt;
        name
      &lt;/th&gt;
      &lt;th&gt;
        username
      &lt;/th&gt;
      &lt;th&gt;
        email
      &lt;/th&gt;
      &lt;th&gt;
        street
      &lt;/th&gt;
      &lt;th&gt;
        suite
      &lt;/th&gt;
      &lt;th&gt;
        zipcode
      &lt;/th&gt;
      &lt;th&gt;
        phone
      &lt;/th&gt;
      &lt;th&gt;
        website
      &lt;/th&gt;
      &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let data of httpdata"&gt; 
        &lt;td&gt;{{data.id}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.name}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.username}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.email}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.address.street}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.address.city}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.address.suite}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.address.zipcode}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.phone}}
        &lt;/td&gt; 
        &lt;td&gt;{{data.website}}
        &lt;/td&gt; 
        &lt;td&gt;
          &lt;a routerLink="/conflict-details/conflict" (click)="onSelect(data)"&gt;Go to 
          &lt;/a&gt; 
        &lt;/td&gt; 
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>if you see there is one go to button i have in table when i click on any specific data it should show me complete info about current clicked 
  but in my case i want to bind the data in another component when i click on go to for specific  that all td data should be display in new component(child).</p>
  
  <p>simple i want to track click event for selected data in child component . and the table is rendered in parent component.</p>
  
  <p><a href="https://i.stack.imgur.com/f3Qvx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f3Qvx.png" alt="if you can see in this screenshot i can bind the data in same component , "></a></p>
  
  <p>attached is the data table I have.</p>
  
  <p><a href="https://i.stack.imgur.com/VvcYo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VvcYo.png" alt="the table where i have bind the data"></a></p>