How to open a Angular component in a new tab?

Question

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.

So imagine I have a component SimpleListComponent, it will hold the data and present a simplified view

export class SimpleListComponent{
    @Input() data: any[];
}

The html

<ul>
    <li *ngFor="let item of data">
        <a>{{item.name}}</a>
    </li>
</ul>

The user should be able to click on one of the itens and open in a new tab a view with that item's details. So if I have a second Component

export class DetailedViewComponent{
    @Input() item: any;
}
<div>
    <!--All fields of item here-->
</div>

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.

How can I achieve that in angular? Give the item data to the second component and open it in a new tab?

Answer 1

In case someone runs into the same issue I ran:

I ended using localstorage to temporarily store my object and access it from the other window.

So the code ended up like:

<a target="_blank" [routerLink]="['/details', item.name]" click="passObject(item.name)">
passObject(i){
    localStorage.setItem('i.name', JSON.stringify(i));
}

And in the details component:

ngOnInit() {
    this.item = JSON.parse(localStorage.getItem(param));
}

Another idea that I could try is implementing a message service