title: Angular6: How to link template variables to service's array with index being in paramMap
body: <p><em>This question is more about design issues than solving a specific error.</em></p>
  
  <p>No matter how I try to do this I have this error :</p>
  
  <pre><code>ERROR TypeError: "_co.accountService.accounts[_co.accountIndex] is undefined"
  </code></pre>
  
  <p>OR (because I tried to use a <code>loading</code> variable which hides the template as long as the route <code>paramMap</code> has not emitted anything): </p>
  
  <pre><code>Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'
  </code></pre>
  
  <p>I have an <code>Account.service</code> which is used by the <code>Account.component</code> to display a list of accounts, so upon initialization an <code>Account[]</code> is stored in the <code>Account.service</code>.</p>
  
  <p>When I click on one of these accounts I'm changing the route to <code>account/1</code> for example which maps to the <code>AccountDetail.component</code>.
  I already have the <code>Account[]</code> in <code>Account.service</code> fully populated and I don't want to initialize an <code>Account</code> variable in the <code>Account.service</code> (should I?).</p>
  
  <p>I would like the <code>Account.component</code> <strong>template</strong> to directly refer to the index of the <code>Account[]</code> in <code>Account.service</code> by using a component variable <code>accountIndex</code> which is deduced from the <code>paramMap</code> observable.</p>
  
  <p>First question: Does this make sense or should I treat this in a different way?</p>
  
  <p>In the <code>Account.component</code> I don't need to store any informations, the whole template is directly bound to the <code>Account.service</code> (i.e <code>&lt;li *ngFor="let account of accountService.accounts"&gt;{{ account.name }}&lt;/li&gt;</code>) and it works fine.
  I'm thinking about doing the same with <code>AccountDetail.component</code> like <code>{{ accountService.accounts[accountIndex].name }}</code>).</p>
  
  <p>That way if any component alters an account all the others displaying them are automatically updated (is it a proper way to achieve this?).</p>
  
  <p><strong>To sum up</strong>: I want all my data to be stored in services (with only specific filtering parameters that are contextual to be stored in components) and I want most of it to be created during Account.component initialization for navigation to be as quick as possible.</p>
  
  <p>How should I design this?</p>
  
  <p>Thanks for reading and if anybody is willing to help me on this topic I can try to provide a plunker if needed (this question being about design I prefer design advice rather than code examples that I might not fully understand).</p>