• Status: Solved
  • Priority: High
  • Security: Private
  • Views: 54
  • Last Modified:

Angular 4 - open pop up window

If I do the below, it opens the window in a new tab

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

Open in new window


Instead of a new tab, I need to open the same route in a pop up window. Javascript code to open a pop up window looks like this

 <a href="javascript:void(0);" onclick="window.open(url, '_blank', 'width=300,height=250');">test</a>

Open in new window


I am not able to make out how to fit in routerLink in this example. Is there another way to open pop up window when using angular?
0
ank5
Asked:
ank5
  • 4
  • 3
1 Solution
 
Julian HansenCommented:
Define your link like this
<a href="" (click)="newWindow(url)">New window</a>

Open in new window

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

Open in new window


EDIT:
The above assumes that the url variable has been defined as in scope.
0
 
ank5Author Commented:
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>

Open in new window


I am using angular 4
0
 
Julian HansenCommented:
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.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
ank5Author Commented:
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},

Open 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');
  }

Open in new window


and the html link as

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

Open 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.
0
 
Julian HansenCommented:
You are not routing within the version that is running in your current browser - you are opening the page in a new browser window - that is not routing.

As soon as you go to a new window you are now External to the SPA - routing is for internal routing within the SPA - but an SPA cannot span multiple browser windows (for obvious reasons)
0
 
ank5Author Commented:
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?
0
 
Julian HansenCommented:
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?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now