Angular 2 Input Component

Steve Fowler

unread,

Oct 23, 2015, 4:15:21 PM10/23/15

to AngularJS

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

Message has been deleted

Steve Fowler

unread,

Oct 24, 2015, 7:04:32 AM10/24/15

to AngularJS

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>

Steve Fowler

unread,

Oct 24, 2015, 7:06:16 AM10/24/15

to AngularJS

'binding' (not bing!!)

On Friday, 23 October 2015 21:15:21 UTC+1, Steve Fowler wrote:

Steve Fowler

unread,

Oct 24, 2015, 1:49:20 PM10/24/15

to AngularJS

Managed to sort it, simple in the end. Got the solution from https://angular.io/docs/ts/latest/guide/cheatsheet.html, see <my-cmp [(title)]="name">

<foxyInput [(model)]="test2"></foxyInput>

I then changed the event to modelChange

import {HostListener, Component, FORM_DIRECTIVES, Input, Output, View, EventEmitter, NgIf } from 'angular2/angular2';


@Component({
    selector: 'foxyInput',
    events: ['modelChange']

})
@View({
  template: `
      <input value={{model}}>
    `,

directives: [FORM_DIRECTIVES, foxyLabel, NgIf]

})
export class foxyInput{
    @Input() model: String;

      @Output() modelChange = new EventEmitter();

    
    @HostListener('change', [
        '$event.target.value'
    ])
    onChange(event) {

this.modelChange.next(event);

    }
    
    @HostListener('keyup', [
        '$event'
    ])
    onKeyup(event) {

        this.modelChange.next(event.target.value);
    }
}

Reply all

Reply to author

Forward