Dynamic router-views

Is it possible to dynamically create router-views? I have some dynamically registered components like:

configureRouter(config: RouterConfiguration, router: Router)
{
	const myComponents = viewProvider.getComponents();
	const viewPorts = {};
	myComponents.forEach((component, idx) =>
	{
		viewPorts[`my-component-${idx}`] = { moduleId: component };
	});
	
	config.map({ route: 'page', name: 'page', viewPorts: viewPorts });

	this.router = router;
	this.myComponents = myComponents;
}

In the template, I would like to do something like that:

<router-view repeat.for="component of myComponents" name.bind="'my-component-' + $index"></router-view>

Unfortunately this is not working (“no router-view found”). I have the following (kind of ugly) workaround for the moment:

<router-view name="my-component-0"></router-view>
<router-view name="my-component-1"></router-view>
<router-view name="my-component-2"></router-view>
<router-view name="my-component-3"></router-view>
<router-view name="my-component-4"></router-view>
<router-view name="my-component-5"></router-view>

No, it’s unfortunately not possible in v1. (It is in v2, but I guess that’s not much of a help.)

Thanks for the quick feedback! :+1: