[Angular 2] 7. Event

Angular 2 introduces a new event syntax for connecting events on the DOM to your controllers.

 

function Clicker() {
    this.counter = 0;
    this.x = 0;
    this.y = 0;
    this.increaseCounter = function() {
        this.counter++;
    };
    this.showPosition = function(e) {
        this.x = e.x;
        this.y = e.y;
    }
}
Clicker.annotations = [
    new angular.ComponentAnnotation({
      selector: 'clicker'
    }),
    new angular.ViewAnnotation({
        templateUrl: 'clicker.tpl.html',
        directives: []
    })
];
document.addEventListener("DOMContentLoaded", function() {
    angular.bootstrap(Clicker);
});

 

<h1>This is a clicker</h1>
<button (click)="increaseCounter();" (mousemove)="showPosition($event)">{{ counter }}</button>
<span>{{ x }}, {{ y }}</span>

 

---

 

In the previous example, we add event to the child component.

How about if we add event to the parent app component like this:

<!--app.tpl.html -->
<h1>My App</h1>
<clicker (click)="onClick($event);" ></clicker>

 

And then in App Component, we add onClick method to the App control.

function App() {
    this.onClick = function(event) {
        console.log(event);
    }
}
App.annotations = [
    new angular.ComponentAnnotation({
      selector: 'app'
    }),
    new angular.ViewAnnotation({
        templateUrl: 'app.tpl.html',
        directives: [Clicker]
    })
];

document.addEventListener("DOMContentLoaded", function() {
    angular.bootstrap(App);
});

But it turn out to be doesn't work.

 

What we need to do is tell the angular look up for the parent using '^' symbol.

<h1>My App</h1>
<clicker (^click)="onClick($event);" ></clicker>