title: Angular 2 Routes Options
body: <p>I am new to Angular and Node JS and I am currently working on an application, which I have come up short when deciding how to best navigate between my different components. </p>
  
  <p><a href="https://i.stack.imgur.com/JT5sI.png" rel="nofollow noreferrer">Users are able to add the name of a user, and add books associated to that user</a></p>
  
  <p>Upon clicking a book name, I wish to navigate to a component associated with that book, pulling information specifically that entry, such as comments.</p>
  
  <p><a href="https://i.stack.imgur.com/HRWoQ.png" rel="nofollow noreferrer">Component that will render specific book information</a></p>
  
  <p>Using Angular 2 (MEAN stack), I would like to understand how I should address such a problem - Should I be storing any specific values to make it easier both to navigate and pull the information about the book from the database. </p>
  
  <pre><code>&lt;article class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;
              &lt;div class="author"&gt;
                   {{ author.fullName }}
              &lt;/div&gt;
              &lt;div class="addbook"&gt;
                  &lt;book-input [author]='author'&gt;&lt;/book-input&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer class="panel-footer"&gt;
          &lt;div&gt;
              &lt;ul *ngFor="let book of author.books"&gt; 
                  &lt;li&gt;&lt;a [routerLink]="['book']"&gt;{{ book }}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; 
      &lt;/footer&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>Any suggestion will be greatly appreciated </p>