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);
}
}
On Saturday, 24 October 2015 12:06:16 UTC+1, Steve Fowler wrote:
>
> 'binding' (not bing!!)
>
> 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.
