title: Angular: pass single object within ngFor to router linked component
body: <p>How do I pass the data binded information within the <code>&lt;a&gt;</code> tag (Within the volume-links.component.html ) to my page-view component when the link is clicked.</p>
  
  <p>I want to pass that particular diary object to my page-view.</p>
  
  <p>I've looked into parent and child component interaction but I don't think that is the proper way to do it. I've looked into communicating via a service but I do not know how that would work for a problem such as this.</p>
  
  <p><strong>volume-links.component.html</strong></p>
  
  <pre><code>&lt;ul class="navigation"&gt;
   &lt;li *ngFor="let d of diary"&gt;
     &lt;a id={{d.notebook_id}} routerLink="/page-view" routerLinkActive="active"&gt;Volume {{d.notebook_id}}, {{ d.date }}, {{ d.volume_id }}, Add MS {{ d.ms_id }}&lt;/a&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>volume-links.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http } from '@angular/http';
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  import 'rxjs/add/operator/map'
  
  @Component({
    selector: 'app-volume-links',
    templateUrl: './volume-links.component.html',
    styleUrls: ['./volume-links.component.scss'],
    //encapsulation: ViewEncapsulation.None
  })
  export class VolumeLinksComponent implements OnInit {
  
  diary : String;
  
  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    this.http.get('/api/diaries').subscribe(data =&gt; {
      this.diary = data["data"]["docs"];
      console.log(this.diary);
    })
   }
  }
  </code></pre>