Angular 4 - open pop up window

Define your link like this

<a href="" (click)="newWindow(url)">New window</a>

Select allOpen in new window

In your component

newWindow(url) {
        window.open(url, '_blank', 'width=300,height=250');
}

Select allOpen in new window

EDIT:
The above assumes that the url variable has been defined as in scope.

How do I load the router and pass parameters to it? Code which opens new tab uses a RouterLink

<a [routerLink]="['/name', 'param1']" target="_blank" >{{ name }}</a>

Select allOpen in new window

I am using angular 4

Why do you want to use the router - you are not routing anywhere  - you are opening a new window - that falls outside of the router.

Sorry, didn't quite get it. How would I tell Angular which component to load if I do not use Routing?

In app-routing.module.ts, I have defined which Component to load -

 

    { path: 'name/:id', component: NameComponent},

Select allOpen in new window

Now, in the Javascript function, I would need to do something like

 newWindow(id: string) {
    let url = "http://localhost:4200/#/name/"+id; //somehow get this host name dynamically, but that's for later
    console.log(url);
    window.open(url, '_blank', 'width=300,height=250');
  }

Select allOpen in new window

and the html link as

<a href="" (click)="newWindow(selectedID)"  >{{ name }}</a>

Select allOpen in new window

If I do this, I am still using Routing to tell Angular which Component to load, so I didn't quite get how to not use Routing in this scenario. Is there another way to load components?

If I use the above approach, I main page routes to the default Route once the link is clicked.

Thanks! Got it.

So, what is incorrect in my implementation that I mentioned in my previous post? what do I need to do in order to load the component without specifying it in app-routing.module.ts?

Does the path not work as per my sample?

Simply put the path to the module with the parameters in the URL and open the window?