CODEWITHSUNDEEP
dartdart-webui
mackristof
mackristof

Reputation: 61

communication between Web-UI Components

I'm a rookie Dartisan. I've pushed test project on https://github.com/mackristof/DartWebComponentCommunication . I want to find the best implementation for communication between 2 web components.If user click button on webComponent 1, how can counter webcomponent 2 can be informed ? Stream ? Bus-Event ?

Thxs for pull request with best solution.

Christophe.

Upvotes: 2

Views: 776

Answers (2)

Manmay
Manmay

Reputation: 844

I think web components can talk to each other through the parent/host DOM using events. When one web component will trigger some event, host/parent DOM should catch it and inform the other web components by changing their attribute values. This way I think web components can communicate.

Upvotes: 0

Allan
Allan

Reputation: 83

For this type of communication I have implemented an event bus, and it has been quite useful for me.

If the event bus is defined at the app level, your event can look something like this; 

void increment() {
      eventBus.fire(clickEvent, 1)
}

And your counter component can be backed by a model object something like;

class CounterComponent extends WebComponent {

    int get count => viewModel.count;

    ViewModel viewModel;
}

and the ViewModel can look something like

class ViewModel{
    int count;

    ViewModel(){
        eventBus.on(clickEvent).listen((msg){
            count = count + msg;
        });
    }
}

Upvotes: 1

Related Questions