In my understanding, Angular 1.5 Component Router does not have the capability to display siblings simultaneously.
One workaround is to treat a sibling as a child component and then utilize an empty component to display it with the default "no details" route.
Solution:
First, we require a root component to initiate the list:
.component('listRoot', {
template: '<ng-outlet></ng-outlet>', //using ng-outlet to render List inside
$routeConfig: [
{path: '/...', name: 'ListRoot',component: 'list' },
]
})
Next, components for list, detail, and noDetail modes need to be added.
.component('list', {
template: 'List ... <ng-outlet></ng-outlet>',
$routeConfig: [
{path: '/', name: 'List',component: 'noDetails', useAsDefault: true },
{path: '/:id',name: 'Details',component: 'details'}
],
bindings: {
$router: '<'
},
controller: function () {
var ctrl = this
$routerOnActivate = function(route) {
ctrl.router = this.$router;
}
this.goToDetails = function(id) {
ctrl.$router.navigate(['Details', {id: id}])
}
}
})
.component('detail', {
template: 'Details: <a ng-link="[\'List\']">Go Back</a>'
})
.component('noDetails', {
template: '' //empty template
})
Accessing parent:
If you need to communicate with the parent (e.g., having the Detail component inform the List component of an ID), you can make use of the require component option to access the parent component's scope.
.component('detail', {
template: 'Details: <a ng-link="[\'List\']">Go Back</a>',
require: {
parent: '^list'
},
controller: {
this.goBackWithNotify = function(data) {
ctrl.parent.someParentComponentProperty = data;
}
}
})
Check out the updated plunker for an example.
PS: I used a newer version of the router in this implementation.