2

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!!

Improve this question

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks for your answer, but it doesn't solve my problem. i've made some really small examples where you can see the problem. angularjs 1.4 works: https://plnkr.co/edit/jAzd9SfoaE3j8HLUCfS2?p=preview angular 2 doesn't: http://plnkr.co/edit/IkLKzFO77lL4BBRIcvOB?p=preview ... i see what the problem is, though.. i'm re-assigning the object with this.selected = {..}. but that did work in angularjs 1.4 like i did it in the first example.
@uNki, yep, re-assigning the object in the child won't work -- the parent still has a reference to the other/original object. You have to emit() an event to notify the parent in Angular 2. This is because of the uni-directional data flow that Angular 2 uses when it does change detection: input properties are propagated from parent to children only. To go in the reverse direction, you need to emit() an event. In Angular 1, = can go in both directions.
3

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

Improve this answer

2 Comments

Btw you can combine the property and event binding and make it an actual two-way data binding directive. E.g. [(selectedChoice)] internally that would be @Input() selectedChoice and @Output selectedChoiceChanged plus some $event data extraction. You can copy that from NgModel
thanks Pascal! for the sake of completeness i've updated the plunk accordingly: http://plnkr.co/edit/10T544XDWIuYLvmOQXki?p=preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.