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?
LVL 1
ank5Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.