CODEWITHSUNDEEP
javascriptangularjsangular-component-router
Pascal Mueller
Pascal Mueller

Reputation: 31

Angular 1.5 component router sibling components

Is there a way with the new component router for Angular 1.5 to keep the sibling component rendered in the ng-outlet directive? I want to show the Detail View in parallel with the sibling List View. As far as I understand the official Docs (https://docs.angularjs.org/guide/component-router) it should be possible with the $$router and bind it to the child component.

Here is what I tried to do: http://plnkr.co/edit/KzW8fLAxrte9jSg5jhEg?p=preview

<ng-outlet><crisis-detail $router="$$router"></crisis-detail>

There i a similiar post on this binding topic:

Angular 1.5 component $router binding

Upvotes: 2

Views: 240

Answers (1)

Eugen Tatuev
Eugen Tatuev

Reputation: 75

There is no ability to show siblings simultaneously with Angular 1.5 Component Router as far as I know.

However, workaround is to make sibling to be actually child, and then use empty component to show with default, "no details" route.

Workaround:

First, we need some root component to activate list itself:

.component('listRoot', {
      template: '<ng-outlet></ng-outlet>', //just ng-outlet, to render List inside
      $routeConfig: [
          {path: '/...', name: 'ListRoot',component: 'list' }, 
      ]
 })

Then we need to add components for list, detail, and noDetail mode.

.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: '' //just empty template
})

Accessing parent:

Also, to be able to notify parent (in your example - sibling Detail component telling it ID to List, and List marking it as selected after) you can use require component option, to be able to access parent component scope.

.component('detail', {
  template: 'Details: <a ng-link="[\'List\']">Go Back</a>',
  require: {
      parent: '^list'
  },
  controller: {
      this.goBackWithNotify = function(data) {
          ctrl.parent.someParentComponentProperty = data;
      }
  }
})

Edited plunker with example.

PS: I used more recent version of router.

Upvotes: 1

Related Questions