Trying to make a radiobutton component in AngularDart, how to share state?

Question

I'm trying to make a radiobutton component in AngularDart.

So it would be used as follows:

<radio_component currentIndex="0" selectedIndexZ="{{cmp.selectedIndexZ}}" 
  textLabel="Label A"></radio_component>

<radio_component currentIndex="1" selectedIndexZ="{{cmp.selectedIndexZ}}" 
  textLabel="Label B"></radio_component>

If someone clicks on one of the radio button components I want the other radio button components to change their state to change a CSS class. When someone clicked on it, I changed selectedIndexZ inside one of these and it didn't update the other ones.

class RadioComponent extends AttachAware with ShadowRootAware {

  @NgTwoWay('currentIndex')
  int currentIndex = 0;

  @NgTwoWay("selectedIndexZ")
  String selectedIndexZ = "0";

If someone clicks on one radio button component, how can it cause the others to update ?

---

Since I have a lack of time, i.e., I have to get it working absolutely NOW, I just copied this method and this works Creating an Angular.Dart Cube component with 6 template arguments

If I get free time in future I'll get back to this question.

Answer 1

You need to use a controller on an ancestor element and bind the selectedIndexZ of both elements to this controller (in the future there will be only one root controller)

You can also embed both elements into another component (which is implicitly a controller) and bind to a field of this component.

@Component(selector: 'parent-element', publishAs: 'par', template: ...)
class ParentComponent {

  @NgTwoWay("selectedIndexZ")
  String selectedIndexZ = "0";

}

template

<parent-element>
  <radio_component currentIndex="0" selectedIndexZ="{{par.selectedIndexZ}}" 
    textLabel="Label A"></radio_component>

  <radio_component currentIndex="1" selectedIndexZ="{{par.selectedIndexZ}}" 
    textLabel="Label B"></radio_component>
</parent-element>