Hi
I'm playing around with Angular 2 trying to make my own input component.
I've come up with this so far
import {Component, FORM_DIRECTIVES, Input, Output, View, EventEmitter }
from 'angular2/angular2';
@Component({
selector: 'foxyInput',
events: ['change']
})
@View({
template: '<input [(ng-model)]="model" (keyup)="onChange($event)"
(change)="onChange($event)" >',
directives: [FORM_DIRECTIVES]
})
export class foxyInput{
@Input() model: String;
@Output() change = new EventEmitter();
onChange(event) {
this.change.next(event.target.value);
}
}
and in the main app ....
import {bootstrap, Directive, Component, CORE_DIRECTIVES, Input, View,
Attribute} from 'angular2/angular2';
import {foxyInput} from './foxy-input';
@Component({
selector: 'my-app',
})
@View({
template: `
<foxyInput model="{{test}}" (change)="onChange($event)"></foxyInput>
{{test}}
`,
directives: [foxyInput]
})
class AppComponent{
test: String;
constructor() {
this.test = "some text";
}
onChange(event) {
this.test = event;
}
}
bootstrap(AppComponent);
It actually all works and the onChange function is firing when the text is
changed in the component, returning the new text value back to 'test' in
the main app.
However, if I add 10 input components I don't want to have to create 10
onChange events to capture the change. Is there an easier way of achieving
it?
Thanks
Steve
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
