Refactored the input component.
import {HostListener, Component, FORM_DIRECTIVES, Input, Output, View,
EventEmitter } from 'angular2/angular2';
@Component({
selector: 'foxyInput',
events: ['textchange']
})
@View({
template: '<input value={{model}}>',
directives: [FORM_DIRECTIVES]
})
export class foxyInput{
@Input() model: String;
@Output() textchange = new EventEmitter();
@HostListener('change', [
'$event.target.value'
])
onChange(event) {
this.textchange.next(event);
}
@HostListener('keyup', [
'$event'
])
onKeyup(event) {
this.textchange.next(event.target.value);
}
}
I can call the component with this but is there a better way to do the bing
between the app and component
<foxyInput model="{{test}}" (textchange)="test=$event"></foxyInput>
On Friday, 23 October 2015 21:15:21 UTC+1, Steve Fowler wrote:
>
> 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.
