How to open a Angular component in a new tab?

I know this is an old post but since this is the first result when you search “how to open angular component in new tab/window” I wanted to post an answer.

If you create a route for the component and load the route in a new tab you will end up bootstrapping the app again.

So if you want to open an angular component without bootstrapping the whole app you can do it using angular portals. You can also easily pass data between the parent and the child window.

I recently has this requirement and I couldn’t find any comprehensive resource on this so I put together an article on it.

https://medium.com/@saranya.thangaraj/open-angular-component-in-a-new-tab-without-bootstrapping-the-whole-app-again-e329af460e92?sk=21f3dd2f025657985b88d6c5134badfc

Here is a live demo of the example app

https://stackblitz.com/edit/portal-simple

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
}