Best way to display a stateless component on the page

[michalpanek]

I've been wondering about how to manage "switch" beetwen dumb/stateless component on the page.

Suppose we have statefull route component users . users rendering in a template three stateless component, but only one at the same time. How is the best way to manage this ? I thought about use ui-router, and switch components navigating beetwen ui-router state. But I don't think is a good idea.

Is a good way to manage this by ng-switch, or ng-if, "switching" beetwen dumb/stateless component, depending on the user interactions and choises ? Or is another, better way ?

<--statefull component template-->
<div ng-switch="$ctrl.switchFlag">
     <one-component ng-switch-when="one"></one-component>
    <two-component ng-switch-when="two"></two-component>
</div>

[siddharth-pandey]

Based on the example that is given in style guide, there are 3 components, a parent (consumes services) and 2 child (list, details) dumb components that are on the same ui-router state. How should we manage the cases where : two different states are required to display a list on one state and details on another state but still uses the parent component so that only this component consumes services?

As if I use ui-router to define two states for above purpose, the $onChanges method is not triggered when any of the input bindings change that were resolved using $resolve service of ui-router. But it works fine if the child component is inside parent template and uses $ctrl instead of $resolve. Based on this SO answer, it makes sense that the watcher only watches the members linked with $ctrl and not $resolve as ui-router adds extra HTML for this process.

So, what will be a good way to use todo, todoForm on one state (for new item or to display an existing item) and todo, todoList on another state?

Todo as a case is quite simple, but you can relate this to more complex types where we need list, details/editing views which may need different states like '/products' for list and '/products/:productId' for details/editing, which may not be possible to show on same view as todo example in the guide. But still use a parent smart component that consumes service and give data to child dumb components.

Also based on this comment, ui-router doesn't support binding attributes from the parent component, through the ui-view, to the child routed component. So, it is not possible to make a switch of views with multiple views and working with bindings at the same time.

This leaves us with making use of ngSwitch or ngIf directive as @michalpanek has said above. I guess, in my case above, I'll need only one ui-router state 'products/:productId' and if Id is present then display details else display list. Is this a good approach?

[michalpanek]

I can said that the only way I achieved this is with sending not single bindings, but sending a one object with bindings inside it. Bindings works also with '&'. Bindings in child component are updates when are changed in parent component, and is possible to fire event callback from child dumb component to parent statefull component. But is still one problem with that approach: $onChanges is doesn't fired when bindings is changing. This looks like that:

In ui-route conf:

$stateProvider
    .state('child', {
      url: "/main",
      component: 'childComponent',
      params: {
        bindingsObj: undefined
      },
      resolve: {
        bindingsObj: ($stateParams) => $stateParams.bindingsObj
      }
    })

in parent Smart Component:

vm.bindingsObj = {
      prop: vm.propsToSendToChild,
      onEvent: vm.eventToFire
    }

    vm.goToChildComponent = function() {
      $state.go('child', { bindingsObj: vm.bindingsObj })
    }

and in child stateless/dumb component is possible to fire onEvent function which fire eventToFire function from smart parent component. And when I change propsToSendToChild in bindingsObj in parent component is also changed in child component.

I create already plnkr Added some changes to show what I meant. Is written in es5 for simplification. click 'go to child component', and 'change props'. See console logs

---

And because of that problems I wrote above, I switched to ng-switch to manage approach: smart->dumbs components. Or maybe I am wrong in some point.:)

[michalpanek]

I wrote about my another way to solved that problem in ui-router github, which I founded, but I don't now if it is very good