I’m using router components a lot, and that works great. Sometimes I have a situation, where I would like to be able to use some component as regular page and as popup depending on the ‘user route’. This might be dependent on UX decisions: open a detail panel in new page, or in a popup with push:true option.
Currently, I maintain two versions of some components: one with <div class="page"> layout, and one with <div class="popup"> layout, each with a corresponding route.
I’m wondering if it is possible to setup a component without a specified page/popup/modal container, and define the way it should be openend with a router.navigate option (and matching data- attribute on a link).
Thanks @nolimits4web! That is exactly the workaround I was looking for, but couldn’t get my mind around it. Having a separate route for a popup version is no problem, but at least I didn’t want to have two copies of the same page component, with the only difference being the ‘container’.
I think I’m going to create a generic “popup container component”, like this
Then create regular routes like /my-page for a page itself, and a single /popup/(.*) route which only loads the popup container and passes the full url minus the /popup part to the view.
Now I can easily modify a button to open a page in a popup by prepending /popup/ in it’s href url.