Angular 2 component two-way databinding with objects

Question

I'm experimenting with the Angular 2 beta and want to use the Semantic UI Dropdown control as Angular 2 component.

http://semantic-ui.com/modules/dropdown.html#converting-form-elements

My small sample project is here:

https://github.com/uNki23/angular2semantic/

I've wrapped it inside an Angular 2 component 'UiSelectComponent' as you can see here:

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/ui-select.component.ts

Any other component should use the UiSelectComponent by passing it two objects: an array holding the possible choices and an optional pre-defined selected choice. I've made an interface for the choice 'SelectOption' which has two properties 'value' (number) and 'displayValue' (string). The component should be used like this:

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/app.component.html

First question: What I want to achieve is, that the pre-selected option is passed to the UiSelectComponent, a user selection changes that option and that option should also change the selected object from the parent component. It's clear that the parent component needs to know, what the selected option from UiSelectComponent is, right?

The second question: Setting the initial selected option inside the semantic ui dropdown just works if I wrap the .dropdown() function inside a setTimeout() function. I thought, that Angular 2 doesn't need that stuff anymore to make changes visible?

I've tried every possible way I've found for the last two days - now I need your help :)

thanks in advance!!

Answer 1

Since there's no two-way data binding in Angular 2 anymore in that particular sense, you always have to propagate changes explicitly.

You'd use EventEmitter to emit an event when your choice changes in <child>. Any parent component can then subscribe to that event declaratively using event binding syntax <child (selectedChange)="doSth()">

Here's a working plunk: http://plnkr.co/edit/2SsgStP3P4DNgXEES8c8?p=preview

Answer 2

First question: you can use an output (EventEmitter) property and emit an event to the parent when you change something in a child. Your parent template would need to listen for this event: <child (someChildEvent)="myCallback()" ...>.

However, if the option data you want to share is inside of an object that you are passing to the child – <child [someChildProperty]="sharedObj" ...>, the parent and child both have a reference to the same/one sharedObj, so any changes you make in the child are visible in the parent. The EventEmitter is likely a better choice, because then you can actually notify the parent when the change occurs... but the event doesn't actually have to pass any values, since the parent already can see any changes that were made to sharedObj.

Second question: I didn't look at your code, but you might need the timeout because you might need to wait for your 3rd-party component to render or finish initializing.