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);