title: How to open a Angular component in a new tab?
body: <p>I have a considerable amount of data to show on the screen. I need to present a simplified list so the user can choose one of the items and see it's details.</p>
  
  <p>So imagine I have a component SimpleListComponent, it will hold the data and present a simplified view</p>
  
  <pre><code>export class SimpleListComponent{
      @Input() data: any[];
  }
  </code></pre>
  
  <p>The html</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let item of data"&gt;
          &lt;a&gt;{{item.name}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The user should be able to click on one of the itens and <strong>open in a new tab</strong> a view with that item's details.
  So if I have a second Component</p>
  
  <pre><code>export class DetailedViewComponent{
      @Input() item: any;
  }
  &lt;div&gt;
      &lt;!--All fields of item here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: The catch here is that I'm presenting data from a very customized search, so I don't have a ID to get the details from the server or any other way to get the data again. So the only way is to, somehow, pass the data that is already loaded.</p>
  
  <p>How can I achieve that in angular? Give the item data to the second component and open it in a new tab?</p>