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

You can create a routing for DetailedViewComponent and ""

In your routing:

{
    path: 'detailed/:id',
    component: DetailedViewComponent
}

And after that On typeScript of SimpleListComponent:

public detailedPath;
ngOnInit() {
     this.detailedPath = window.location.origin + '/detailed/';
}

On your Html of SimpleListComponent:

<ul>
   <li *ngFor="let item of data">
      <a href="{{detailedPath + item.id}}" target="_blank">
   </li>
</ul>

On TypeStript of DetailedViewComponent:

public id;
constructor(private routeParams: ActivatedRoute) {
}

ngOnInit() {
    this.routeParams.params.subscribe(params => {
      this.id = parseInt(params['id']);
    });
    //Some logic to get the details of this id
}

Answer 2

I would suggest you do it from HTML by using the target attribute :

<a target="_blank" [routerLink]="['/detail',item.name]">

In this example "/item/:name" should be defined in your routing module.

Answer 3

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