Angular2 Decorator

1 at first, we use the (keyup) event handler to update the modify

@Component({
selector: 'my-app'
})

@Template({
inline: '<h1>{{myName}}</h1>' +
'<input type="text" #newname (keyup)/>' +
'<h3 [style.color]="newname.value">{{newname.value}}</h3> '

})

but, if i wanna do something more when I use the keyup in all the input keyup?

we use the Decorator to decorator the event

2 import the Decorator

import {Component, Template, bootstrap, Decorator} from 'angular2/angular2';

3 define the Decorator

@Decorator({
selector: 'input',
events: {'keyup': 'onKeyUp()'}
})

class InputDecorator {
onKeyUp() {
console.log('do nothing');
}
}

4 use the decorator

@Template({
inline: '<h1>{{myName}}</h1>' +
'<input type="text" #newname />' +
'<input type="text" #test/>' +
'<h3 [style.color]="newname.value">{{newname.value}}</h3> ',
directives: [InputDecorator]

})

5 the whole page code

import {Component, Template, bootstrap, Decorator} from 'angular2/angular2';
@Decorator({
selector: 'input',
events: {'keyup': 'onKeyUp()'}
})

class InputDecorator {
onKeyUp() {
console.log('do nothing');
}
}
@Component({
selector: 'my-app'
})

@Template({
inline: '<h1>{{myName}}</h1>' +
'<input type="text" #newname />' +
'<input type="text" #newnam />' +
'<h3 [style.color]="newname.value">{{newname.value}}</h3> ',
directives: [InputDecorator]

})

class MyApp {

constructor() {
this.myName = 'Jackey';
this.myFriends = [
{name: 'Jackey1', age: 25},
{name: 'Jackey2', age: 26}
];
}
}

bootstrap(MyApp);