angularjs - Angular 2 component two-way databinding with objects -
i'm experimenting angular 2 beta , want use semantic ui dropdown control angular 2 component.
http://semantic-ui.com/modules/dropdown.html#converting-form-elements
my small sample project here:
https://github.com/unki23/angular2semantic/
i've wrapped inside angular 2 component 'uiselectcomponent' can see here:
https://github.com/unki23/angular2semantic/blob/master/src/app/components/ui-select.component.ts
any other component should use uiselectcomponent passing 2 objects: array holding possible choices , optional pre-defined selected choice. i've made interface choice 'selectoption' has 2 properties 'value' (number) , 'displayvalue' (string). component should used this:
https://github.com/unki23/angular2semantic/blob/master/src/app/components/app.component.html
first question: want achieve is, pre-selected option passed uiselectcomponent, user selection changes option and option should change selected object parent component. it's clear parent component needs know, selected option uiselectcomponent is, right?
the second question: setting initial selected option inside semantic ui dropdown works if wrap .dropdown() function inside settimeout() function. thought, angular 2 doesn't need stuff anymore make changes visible?
i've tried every possible way i've found last 2 days - need :)
thanks in advance!!
first question: can use output (eventemitter) property , emit event parent when change in child. parent template need listen event: <child (somechildevent)="mycallback()" ...>
.
however, if option data want share inside of object passing child – <child [somechildproperty]="sharedobj" ...>
, parent , child both have reference same/one sharedobj
, changes make in child visible in parent. eventemitter better choice, because can notify parent when change occurs... event doesn't have pass values, since parent can see changes made sharedobj
.
second question: didn't @ code, might need timeout because might need wait 3rd-party component render or finish initializing.
Comments
Post a Comment